JavaScript计时器、防抖、节流

计时器方法

1
2
3
4
5
6
7
8
// 设置计时器，间隔一段时间循环执行
setInterval(function, millisecond)
// 停止计时器
clearInterval(timer)
// 设置计时器，延时执行一次
setTimeout()
// 停止计时器
clearTimeout()

防抖与节流

防抖（debounce）：防止短时间内多次触发事件，只触发最后一次。

节流（throttle）：防止短时间内多次触发事件，但是间隔事件内，还是需要不断触发。

通过“计时器”可以实现防抖与节流。

防抖

触发事件会导致重新计时，计时走完才会执行一次操作。

会重置定时器

示例：

1
2
3
4
5
6
7
8
9
10
11
let timer = null;
window.onscroll = function() {
    if (timer !== null) {
        clearTimeout(timer)
    }
    timer = setTimeout(()=>{
        // 需要防抖的操作
        console.log("防抖操作");
        timer = null;
    }, 500);
};

利用闭包封装防抖算法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 传入一个业务函数
function debounce(fun) {
    let timer = null;
    // 闭包函数
    return function() {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(()=>{
            fun();
        }, 500);
    }
}

真实场景：

  • 表单提交

  • 搜索提示

节流

每隔一段时间才可以触发一次操作。其他时间的会被拦截。

示例：

1
2
3
4
5
6
7
8
9
10
11
// 每隔一段时间才可以执行一次操作
let mark = true;
window.onscroll = function() {
    if(mark) {
        setTimeout(()=>{
            console.log();
            mark = true;
        }, 500);
    }
    mark = false;
};

利用闭包封装节流算法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function throttle(fun) {
    // 是否可以触发
    let mark = true;
    // 闭包函数
    return function() {
        if(mark) {
            setTimeout(()=>{
                // 执行业务函数
                fun();
                mark = true;
            }, 500);
        }
        mark = false;
    };
}

真实场景：

  • 用在减小频率的地方