函数节流和防抖 | 易学教程

我觉得啃犀牛书已经不能满足我了！

记录下函数节流和防抖，以前写后端的时候从来不知道还有这个说法，但是在前端好像应用的很多

函数节流

限制函数在一段时间内只能执行一次

适用情景：
1、高频点击表单提交
2、滚动条问题等（滚动加载更多）
3、搜索栏搜索关键字提示

代码实现：

// 第一种通过判断时间间隔实现
function throttle(fn, interval = 1000) {
    const currentTime = + new Date();
    let lastTime = 0;
    if (thisTime - lastTime > interval ) {
        fn.apply(this, arguments);
        lastTime = +new Date();
    }
}

// 第二种通过标记判断
function throttle(fn, interval = 1000) {
    let canRun = true;
    return function () {
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            canRun = true;
        }, interval);
    };
}

函数防抖

触发事件之后n秒内，函数只能执行一次，如果在n秒内事件再次触发，会重新计算函数执行时间
简单来说就是一个函数一直触发，但是只会执行最后一次

适用场景：
1、文本框输入监听（判断用户名是否被占用，判断输入值是否合法等等），比丢失焦点判断友好的多

代码实现：

// 在设置好的时间内，每当函数被触发时，就清除前一个设置的定时器。
function debounce(fn, interval =1000) {
     let timeOut = null;
     return () => {
         clearTimeout(timeOut);
         timeOut = setTimeout(() => {
             fn.apply(this, arguments)
         }, interval );
     }
}

来源：CSDN

作者：叫我Ybbb

链接：https://blog.csdn.net/qq_41885871/article/details/103712700

标签

interval