JS-防抖与节流

这篇文章是小编对js防抖和节流的一个总结。

定义：

防抖

任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。举一个实例案例。常见的搜索框，我们输入内容时就会返回索引，但在短时间内不会只要内容有改变就去拿内容去索引，这样对资源消耗很大，防抖这个时候就派上用场，定义一个间隔时间，间隔时间内触发不会去执行函数。

节流

指定时间内只能执行一次。同样的举一个实例当用户填写信息提交时，提交申请请求定义节流后一点时间就只会有一个请求发出去。

代码实现

防抖实现

这边以一个累加器去说明(省略了html和css代码)

按照我们的实现方法当我们第一次去操作函数时还是需要去等待计时器操作，所以这边多一个是否立即执行的参数取供使用。

let num = 1;
function count() {
    content1.innerHTML = num++;
};
let debounce = (func, wait = 1000, immediateExecution) => {
    // 缓存一个定时器id
    // 这里返回的函数是每次用户实际调用的防抖函数
    // 如果已经设定过定时器了就清空上一次的定时器
    // 开始一个新的定时器，延迟执行用户传入的方法
    return function(...args) {
        let timer;
        // 所以我们用一个中介值来实现
        if (timer) clearTimeout(timer);
        if(!immediateExecution) {
            timer = setTimeout(() => {
                func.apply(this, args);
            }, wait);
        }
        if(immediateExecution) {
            func.apply(this, args);
            immediateExecution=!immediateExecution;
        }
    }
};
content.onclick = debounce(count, 1000, true);

节流实现

function throttle(func, wait) {
    let timeout;
    return function(...args) {
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(this, args)
            }, wait)
        }
    }
}
content.onclick = throttle(count, 1000);

这边效果演示就不录屏了主要是在理解防抖节流的实现
ending...