js中的防抖和节流

概念：

        函数防抖(debounce)：在持续触发事件的情况下，事件只执行一次

        函数节流(throttle)：在持续触发事件时，每隔一段时间执行一次

防抖和节流的 最终目的 都是避免回调函数中的处理每次都执行，以免出现延迟或卡顿的现象。

函数防抖(debounce)

//防抖
function debounce(fn, wait) {
    // 存放定时器的返回值
    var timeout = null; 
    return function() {
        //判断定时器是否还在运行
        if (timeout) {
            //清除上一次创建的定时器
            clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, wait);
    };
}

function number() {
    console.log("111111");
}

//页面点击事件
window.addEventListener('click', debounce(number, 1000));

函数节流(throttle)

节流的方法有两种：一种是利用时间戳，另一种是利用定时器

• 利用时间戳来实现节流

//时间戳
function throttle(fn, wait) {
    //初始化一个变量 存储上一次获取数据的时间戳
    let previous = 0;
    return function() {
        //获取此时触发事件的时间戳
        let now = Date.now();
        //判断距离上次获取数据间隔时间
        if (now - previous > wait) {
            fn.apply(this, arguments);
            //垂直上一次获取数据的时间戳
            previous = now;
        }
    }
}


function number() {
    console.log("111111");
}
//页面点击事件
window.addEventListener('click', throttle(number, 1000));

• 利用定时器来实现节流

//定时器
function throttle(fn, wait) {
    var timeout = null;
    return function() {
        if (!timeout) {
            timeout = setTimeout(() => {
                fn.apply(this, arguments);
                timeout = null;
            }, wait);
        }
    }
}


function number() {
    console.log("111111");
}
//页面点击事件
window.addEventListener('click', throttle(number, 1000));

区别:

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数；

函数防抖只在最后一次事件后，触发一次事件处理函数