防抖和节流（自己的理解）

防抖是指连续触发的时候只会执行一次，停止触发 N 秒后才能继续执行，而节流是指如果你持续触发事件，每隔一段时间，只执行一次事件。像防止按钮多次点击就用防抖，像是监听滚动事件就用节流。

防抖场景

• 即时搜索，一个输入框，改变值后进行搜索，要用防抖，例如500ms，我输一个单词 word 后500ms内没有再输入的话，执行搜索，避免输一个句子搜索N遍（搜索框搜索输入。只需用户最后一次输入完，再发送请求）
• 手机号、邮箱验证输入检测
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流场景

• 节流还能用在刷新上，有的人猛点刷新，但为了服务器考虑，我们只在每一秒刷新一次，做节流，就算他一秒点100次我们也只刷新1次
• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交

区别

• 防抖只有停止操作后才执行1次
  防抖1秒，我连续点按钮10秒，在11秒的时候，执行一次
• 节流是每隔固定时间执行一次
  节流1秒，我连续点按钮10秒，每秒执行一次，共执行10次

    <div id="box"></div>
    <br>
    <button id="btn">测试</button>

    <script>
        // 防抖
        var timer;
        box.onmousemove = function () {
            clearTimeout(timer)
            timer = setTimeout(function () {
                console.log("1")
            }, 1000);
        }

        //节流
        var lastTime = 0;
        btn.onclick = function () {
            var nowTime = new Date().getTime();
            if (nowTime - lastTime > 1000) {
                console.log("2")
                lastTime = nowTime;
            }
        }
    </script>

封装防抖

    var myApp=fangdou(add,1000)
        
        box.onmousemove = event=>{
            myApp(event.clientX,20)
        }

        function add(a, b) {
            console.log(a + b)
        }
        function fangdou(fn, time) {
            var timer;
        
            return function () {
                clearTimeout(timer)
                var arg=arguments;
                timer = setTimeout(function () {                
                    fn.apply(this, arg)             
                }, time);
            }

        }