【JS】防抖和节流

防抖或节流：本质上优化高频率执行代码的一种手段，限制函数执行次数。当浏览器的resize、scroll、keypress、mousemove等事件触发时，会不断调用绑定在事件上的回调函数，极大的浪费资源，降低前端性能。为了优化体验，就需要对这类事件进行调用次数的限制，通常使用防抖和节流方式来较少频率

• 防抖：n秒后执行该事件，若在n秒内重复触发，则重新开始计时。通过setTimeout方式，在一定时间间隔内，将多次触发变成一次触发。
• 节流：n秒内只执行一次，若在n秒内被重复触发，则只有一次有效，若在减少一段时间的触发频率

 <input type="text" name="" id="">
    <input type="submit" value="提交" id="input">

    <script>
        var btn = document.getElementById('input');
        btn.addEventListener('click', debounce(submit, 2000), false);

        function submit(){
            console.log(1);
        }
        function debounce(fn, timer){
            var t =null;
            console.log(this);//window调用的
            return function(){//只有btn被点击了，该方法才会被调用
                console.log(this);//this指向btn
                var firstClick = !t;
                if(t){ clearTimeout(t) }
                if(firstClick){
                    fn.apply(this, arguments);
                }
                t = setTimeout(()=>{
                    // fn()
                    t = null;
                }, timer)
            }
        }
        function throttle(fn, delay){
            var begin = 0;
            return function(){
                var cur = new Date().getTime();
                if(cur - begin > delay){
                    fn.apply(this, arguments);
                    begin = cur;
                }
            }
        }
    </script>

应用场景：

• 防抖在连续事件，只需触发一次回调的场景：
  • 搜索框搜索输入：只有用户最后一次输入完再发送请求
  • 手机号、邮箱验证输入检测
  • 调整窗口大小resize：只需窗口调整完成后，计算窗口大小，防止重复渲染
• 节流在间隔一段时间执行一次回调的场景：
  • 滚动加载，加载更多或滚到底部监听
  • 搜索框，搜索联想功能