防抖、节流

一、函数防抖

单位时间内，频繁触发一个事件，以最后一次触发为准。

防抖的实现：

1.声明一个全部变量存储定时器ID。

2.每一次触发交互的时候，先清除上一次的定时器，然后开启本次定时器。

例：

//防抖debounce代码：
function debounce(fn,delay) {
    var timeout = null; // 创建一个标记用来存放定时器的返回值
    return function (e) {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout); 
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}
// 处理函数
function handle() {
    console.log('防抖：', Math.random());
}
        
//滚动事件
window.addEventListener('scroll', debounce(handle,500));

二、函数节流

单位时间内，频繁触发一个事件，只会触发一次。

节流的实现：

1.声明一个全局变量存储触发事件。

2.每一次触发事件，获取当前时间。

3.判断当前时间与上一次触发事件，是否超过了间隔。

1. 如果超过间隔时间，则执行事件处理代码，然后存储本次触发的时间。

使用场景：

1. 懒加载、滚动加载、加载更多或监听滚动条位置；

2. 百度搜索框，搜索联想功能；

3. 防止高频点击提交，防止表单重复提交；

例：

// 时间戳方案
function throttle(fn,wait){
    var pre = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if( now - pre >= wait){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}
    
window.addEventListener("mousemove",throttle(handle,1000)); 

// 定时器方案
function throttle(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("mousemove",throttle(handle,1000));