函数防抖与函数节流

函数防抖

函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。
举个栗子:

  1. 搜索框输入完实时请求搜索
  2. 用户名、手机号、邮箱等输入验证
  3. 浏览器窗口大小改变后,窗口调整完后,再执行 resize 事件中的代码,防止重复渲染
function debounce(fn, wait) {
    let timer = null;
    return function () {
        if (timer !== null) {
            clearTimeout(timer);
        }
        timer = setTimeout(fn, wait);
    }
}

函数节流

指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次… 。节流如字面意思,会稀释函数的执行频率。
举个栗子:

  1. 页面滚动判断
// func要执行的函数  wait执行间隔的时间  immediate是否立即执行
function throttle(fn, interval = 300) {
    let canRun = true;
    return function () {
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            canRun = true;
        }, interval);
    };
}
上一篇:Microlib & Stdlib内存模型区别


下一篇:JavaScript中函数防抖、节流