1.防抖介绍

防抖策略（debounce）:单位时间内，频繁触发事件，只会触发最后一次*

函数防抖实际开发应用场景： 1. 实时获取输入框文本 (经典场景)

2. 文本编辑器实时保存（博客发布文章编辑器）

3.按钮的点击(短信按钮的发送防止客户连续点击)

代码实现

  <input type="text" placeholder="请输入文本">
  <script>
 // 声明一个全局变量存储定时器
  let timeID = null
        document.querySelector('input').oninput = function(){
            //清除上一次定时器
            clearTimeout(timeID)
            //开启本次定时器. 500ms内用户没有触发，自动执行定时器代码。 
            timeID = setTimeout(()=>{
                console.log(`发送ajax请求，搜索内容为xxx`)
            },500)            
        }
  </script>

优点:能够保证用户在频繁触发某些事件的时候,不会频繁的执行回调,只会被执行一次用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；

2.节流介绍

节流策略（throttle）:单位时间内，频繁触发事件，只会触发一次

函数节流应用场景： 解决高频事件，频繁触发事件浪费性能

鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

  <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            color: #fff;
            text-align: center;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 节流  频繁触发事件时  依然按照固定时间多次执行代码
        const box = document.querySelector('.box')
        let i = 1

        // 内容变化函数
        function click() {
            box.innerHTML = i++
        }

        // 节流函数
        function throttle(fn, t) {
            // 声明开始时间
            let startTime = 0
                // 鼠标点击后调用函数  不加return则只执行一次
            return function() {
                // 得到鼠标点击的时间戳
                let now = Date.now()
                    // 当前鼠标移动时间比上次鼠标移动时间大于500时执行变化函数
                if (now - startTime >= t) {
                    fn()
                        // 调用变化函数后把时间戳赋值给开始时间
                    startTime = now
                }
            }
        }
        box.addEventListener('click', throttle(click, 500))

懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

        // 滚动条事件
        // 声明全局变量存储上一次触发交互时间
        let lastTime = null
        window.onscroll = function(){
            //判断时间间隔
            let currentTime = Date.now()
            // 每一次触发事件, 获取当前时间  与 上一次时间做比较。判断是否超过节流间隔
            if( currentTime - lastTime >= 500 ){
                console.log('执行滚动条事件处理代码')
                //如果 超过节流时间，则执行事件处理代码。 并且存储本次触发时间。
                lastTime = currentTime
            }
        }

3.防抖和节流的区别------总结

1. 防抖就像MOBA游戏峡谷里的英雄释放技能,在单位时间内只能放一次大招,不能连续重复释放,如果被打断会返还冷却,再次释放,因此只会计算最后一次放出的技能
1. 节流就像MOBA游戏峡谷里英雄的攻速,无论玩家点击鼠标的速度有多快,英雄的攻击速度只会按照他当时的攻速值相关(跟玩家手速无关,与英雄的装备和成长度有关)

后记

欢迎发表不同意见!!!