JavaScript 防抖和节流

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战javascript

函数防抖

防抖概念

事件触发后 n 秒后开始执行，n 秒内再次触发则从新计时
若是一直在 n 秒内触发事件，则回调一直不会执行
联想公交车上客场景，上完一波人，长时间没有人上了，就会关门出发
通常用于提交数据、ajax 请求、输入验证等

防抖函数封装

不须要当即执行java

利用闭包，设置 timer 保存计时器状态ajax

每次触发事件时，不管如何先清空计时器，再开新计时器markdown

function debounce(fn, delay) {
    let timer;
    return function() {
        const _args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, _args);
        }, delay);
    };
}
复制代码

须要当即执行闭包

核心是有计时器就清除，并开启新计时器app

当即执行的逻辑是执行后开启一个定时器保持不可执行状态函数

/** * 防抖函数：每一次的高频触发只执行一次 * * @param fn 目标函数 * @param delay 延迟时间 * @param triggerNow 是否当即执行 * @return {(function(): void)|*} */
function debounce(fn, delay, triggerNow) {
    let timer = 0;
    let executed = false;
    return function () {
        const _args = arguments;
        clearTimeout(timer);
        // 先关闭定时器
        if (triggerNow) {
            // 若是须要当即执行
            // 判断 executed 是否为 false，为 false 则执行
            // 开启新定时器防止短期内再次触发
            if (!executed) {
                fn.apply(this, _args);
                executed = true;
            }
            timer = setTimeout(function () {
                executed = false;
            }, delay);
        } else {
            // 若是不须要当即执行
            // 每次触发开启新定时器便可
            timer = setTimeout(function () {
                fn.apply(this, _args);
            }, delay);
        }
    };
}
复制代码

函数节流

节流概念

事件触发后 n 秒内只执行一次， n 秒内再次触发则不执行
若是一直触发事件，则会间隔 n 秒执行一次
联想地址过闸场景，无论多少人等待，都要一个一个、开闸关闸有序经过
通常用于输入验证、搜索框提示等

节流函数封装

计算时间差实现post

function throttle(fn, interval) {
  let begin = new Date().getTime()

  return function() {
    const _args = arguments
    
    const cur = new Date().getTime()

    // 过了指定长的时间才执行
    if(cur - begin >= interval) {
      fn.apply(this, _args)
      begin = cur
    } 
  }
}
复制代码

计时器实现ui

核心是有计时器就 returnthis

/** * 节流函数：高频触发时，按指定间隔执行 * * @param fn 目标函数 * @param interval 时间间隔 * @return {(function(): void)|*} */
function throttle(fn, interval) {
    let timer = 0;

    return function () {
        const _args = arguments;

        // 有定时器则返回
        if (timer) {
            return;
        }
        timer = setTimeout(() => {
            fn.apply(this, _args);
            timer = 0;
        }, interval);
    };
}
复制代码