JS的防抖节流

   // 防抖
   // 只执行最后一次
   function debounce (callback,delay) {
        var t = null;
        return function () {
            clearTimeout(t);
            t = setTimeout(callback,delay);
        }
    }
    window.onscroll = debounce(function(){
        console.log("调用了一次");
    },500)
    
    // 节流;500s内值执行一次
    function throttle (callback,duration){
        var lastTime = new Date().getTime();
        return function () {
            var now = new Date().getTime();
            if(now - lastTime > 500){
                callback();
                lastTime = now;
            }
        }
    }
    window.onscroll = throttle(function(){
        console.log("调用了一次");
    },500)

总结：

1.防抖：一段时间内多次触发,只执行最后一次操作
2.节流：一段时间内多次触发,只会执行一次
防抖是指在一段时间内，只执行最后一次触发的事件，而节流是指一段时间内，固定间隔触发事件。

防抖在连续的事件，只需触发一次回调的场景有：

1.搜索框搜索输入。只需用户最后一次输入完，再发送请求

2.手机号、邮箱验证输入检测

3.窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流在间隔一段时间执行一次回调的场景有：

1.滚动加载，加载更多或滚到底部监听