关于前端:自定义节流函数六步应对复杂需求

33次阅读

共计 7861 个字符，预计需要花费 20 分钟才能阅读完成。

节流定义

某些频繁操作的事件会影响性能，” 节流 ” 用来管制响应的工夫距离，当事件触发的时候，绝对应的函数并不会立刻触发，而是会依照特定的工夫距离，每当到了执行的响应距离时，才会执行响应函数。

节流案例

网络游戏中的 ” 飞机大战 ”，键盘按键能够用于发射子弹，疾速不停的敲击键盘，飞机不会不停的发射，而是以肯定的工夫距离，来管制子弹与子弹的间隔。比方零碎设定一秒钟发射一次子弹，那么即便你在一秒钟内敲击了 20 次键盘，依然只会发送 1 次子弹。

节流应用场景

在程序设计的过程中，很多场景都可能用到 ” 节流 ”。

  • 输入框频繁输出、搜寻
  • 按钮频繁点击、提交信息，触发事件
  • 监听浏览器的滚动事件
  • 监听浏览器的缩放事件

没有应用节流时

这里模仿一个商品搜寻框，咱们须要对用户输出的内容调用接口进行关联查问，来给用户进行搜寻提醒。
当没有应用防抖时，咱们会间接将函数绑定到对应的事件上。

// html
<input />

// js 代码
const inputEl = document.querySelector("input");

let count = 0;
function inputEvent(event) {console.log(`${++count}次输出，获取的内容为:${event?.target?.value}`);
}
inputEl.oninput = inputEvent;

input 框内输出 ”javascriptcsses6″，一共 16 个字符，所以办法调用了 16 次

这样的形式性能很低，因为每输出一个字符就调用接口，对服务器造成的压力很大，” 节流 ” 的作用按指定工夫执行函数，防止了屡次执行造成的资源节约。

自定节流函数

节流函数实现的原理是，依照指定的工夫距离来执行函数。

第一步：根本版节流实现

判断以后与上一次执行函数的工夫距离，如果超过了指定的工夫距离，就执行函数。

function throttle(fn, interval) {
  // 将初始工夫定为 0
  let startTime = 0;
  
  const _throttle = function () {
    // 获取以后工夫
    let currentTime = new Date().getTime();
    // 获取剩余时间(以后工夫与指定距离的间隔)
    let restTime = interval - (currentTime - startTime);
    
    // 剩余时间小于等于 0 时，执行函数
    if (restTime <= 0) {
      // 执行传入的函数
      fn();
      // 将以后工夫赋值给初始工夫
      startTime = currentTime;
    }
  };
  return _throttle;
}

inputEl.oninput = throttle(inputEvent, 2000);

这里指定的工夫距离为 2 秒钟，即 2 秒钟执行一次函数。

但此时咱们发现，参数没有被传递过去，实际上 this 的指向也不对了

第二步：拓展 this 和参数

通过 apply 办法来扭转 this 的指向，以及传递参数

function throttle(fn, interval) {
  // 将初始工夫定为 0
  let startTime = 0;
  
  const _throttle = function (...args) {
    // 获取以后工夫
    let currentTime = new Date().getTime();
    // 获取剩余时间(以后工夫与指定距离的间隔)
    let restTime = interval - (currentTime - startTime);
    
    // 剩余时间小于等于 0 时，执行函数
    if (restTime <= 0) {
      // 通过 apply 扭转 this 的指向和传递参数
      fn.apply(this, args);
      // 将以后工夫赋值给初始工夫
      startTime = currentTime;
    }
  };
  return _throttle;
}

此时 this 和参数都曾经能够获取到了~

到这里为止，曾经实现了节流的大部分应用场景，上面的性能会更为简单。

第三步：函数立刻执行

在下面的函数定义中，输出第一个字符时，函数大概率会执行的，因为输出第一个字符的工夫减去初始化的工夫 0 秒钟，个别会大于设定的工夫距离。

如果感觉在输出第一个字符时的函数执行没有必要，那么能够自定义参数，来管制函数是否会立刻执行。

参数 leading 管制函数立刻执行，默认为 true。

function throttle(fn, interval, options = {}) {
  let startTime = 0;
  // leading 默认值设置为 true
  const {leading = true} = options ;
  
  const _throttle = function (...args) {let currentTime = new Date().getTime();
    
    // 不须要立刻执行时，将初始值为 0 的 startTime 批改为以后工夫
    if (!leading && !startTime) {startTime = currentTime;}
    let restTime = interval - (currentTime - startTime);
    
    if (restTime <= 0) {fn.apply(this, args);
      startTime = currentTime;
    }
  };
  return _throttle;
}

// 传入 leading 参数
 inputEl.oninput = throttle(inputEvent, 2000, {leading: false,});

这样就会期待 2s 才会执行第一次函数调用

第四步：函数最初一次执行

“ 节流 ” 只和函数的间隔时间无关，和最初一个字符输出实现无关。

所以最初一个字符输出实现后，与上一次函数调用的工夫距离如果没有到指定的工夫距离时，此时函数是不会执行的。如果须要执行，须要自定义参数来管制函数执行。

通过参数 trailing 管制函数最初一次执行，默认为 false。当函数须要在最初执行时，在每个工夫距离还没有到执行时设置计时器，等到了工夫距离执行函数时，清空计时器，如果最初一个字符输出后还没有到指定距离，则执行计时器中的内容。

function throttle(fn, interval, options = {}) {
  let startTime = 0;
  // 设置一个计时器
  let timer = null;
  // leading 默认值设置为 true，trailing 默认值设置为 false
  const {leading = true, trailing = false} = options;
  
  const _throttle = function (...args) {let currentTime = new Date().getTime();
    
    // 不须要立刻执行时，将初始值为 0 的 startTime 批改为以后工夫
    if (!leading && !startTime) {startTime = currentTime;}
    let restTime = interval - (currentTime - startTime);
    
    if (restTime <= 0) {
      // 当存在计时器时，清空计时器
      if (timer) {clearTimeout(timer);
        timer = null;
      }
      fn.apply(this, args);
      startTime = currentTime;
      // 执行实现就不再执行上面计时器的代码，防止反复执行
      return;
    }
    
    // 如果须要最初一次执行
    if (trailing && !timer) {
      // 设置计时器
      timer = setTimeout(() => {
        timer = null;
        fn.apply(this, args);
        // 当须要立刻执行时，开始工夫赋值为以后工夫，反之，赋值为 0
        startTime = !leading ? 0 : new Date().getTime();
      }, restTime);
    }
  };
  return _throttle;
}

// 传入 leading、trailing 参数
inputEl.oninput = throttle(inputEvent, 2000, {
    leading: false,
    trailing: true,
});

此时输出完最初一个字符，期待计时器中设置的工夫距离（restTime），函数会再次执行。

第五步：勾销性能

可能存在这样的场景，当用户搜寻时点击了勾销，或者敞开页面，此时就不须要再发送申请了。
咱们减少一个勾销按钮，点击后终止操作。

// html
<input />
<button> 勾销 </button>

// javascript
function throttle(fn, interval, options = {}) {
  let startTime = 0;
  // 设置一个计时器
  let timer = null;
  // leading 默认值设置为 true，trailing 默认值设置为 false
  const {leading = true, trailing = false} = options;
  
  const _throttle = function (...args) {let currentTime = new Date().getTime();
    // 不须要立刻执行时，将初始值为 0 的 startTime 批改为以后工夫
    if (!leading && !startTime) {startTime = currentTime;}
    let restTime = interval - (currentTime - startTime);
    
    if (restTime <= 0) {
      // 当存在计时器时，清空计时器
      if (timer) {clearTimeout(timer);
        timer = null;
      }
      fn.apply(this, args);
      startTime = currentTime;
      // 执行实现就不再执行上面计时器的代码，防止反复执行
      return;
    }
    
    // 如果须要最初一次执行
    if (trailing && !timer) {
      // 设置计时器
      timer = setTimeout(() => {
        timer = null;
        fn.apply(this, args);
        // 当须要立刻执行时，开始工夫赋值为以后工夫，反之，赋值为 0
        startTime = !leading ? 0 : new Date().getTime();
      }, restTime);
    }
  };
  
  // 在函数对象上定义一个勾销的办法
  _throttle.cancel = function () {
    // 当存在计时器时，清空
    if (timer) {clearTimeout(timer);
      timer = null;
      // 重置开始工夫
      startTime = 0;
    }
  };
  return _throttle;
}

// 获取 dom 元素
const inputEl = document.querySelector("input");
const cancelBtn = document.querySelector("button");

const _throttle = throttle(inputEvent, 2000, {
    leading: false,
    trailing: true,
});

// 绑定事件
inputEl.oninput = _throttle;
cancelBtn.onclick = _throttle.cancel;

当点击了勾销之后，就不会再执行计时器的内容

第六步：函数返回值

下面的 ” 节流 ” 函数执行后都没有返回值，如果须要返回值的话，有两种模式。

回调函数
通过参数中传递回调函数的模式，来获取返回值。

function throttle(fn, interval, options = {}) {
  let startTime = 0;
  // 设置一个计时器
  let timer = null;
  // leading 默认值设置为 true，trailing 默认值设置为 false，传入回调函数用于接管返回值
  const {leading = true, trailing = false, callbackFn} = options;
  const _throttle = function (...args) {let currentTime = new Date().getTime();
    // 不须要立刻执行时，将初始值为 0 的 startTime 批改为以后工夫
    if (!leading && !startTime) {startTime = currentTime;}
    let restTime = interval - (currentTime - startTime);
    if (restTime <= 0) {
      // 当存在计时器时，清空计时器
      if (timer) {clearTimeout(timer);
        timer = null;
      }
      // 获取执行函数的后果
      const result = fn.apply(this, args);
      // 执行传入的回调函数
      if (callbackFn) callbackFn(result);
      startTime = currentTime;
      // 执行实现就不再执行上面计时器的代码，防止反复执行
      return;
    }
    if (trailing && !timer) {timer = setTimeout(() => {
        timer = null;
        // 获取执行函数的后果
        const result = fn.apply(this, args);
        // 执行传入的回调函数
        if (callbackFn) callbackFn(result);
        // 当须要立刻执行时，开始工夫赋值为以后工夫，反之，赋值为 0
        startTime = !leading ? 0 : new Date().getTime();
      }, restTime);
    }
  };
  // 在函数对象上定义一个勾销的办法
  _throttle.cancel = function () {if (timer) {
      // 当存在计时器时，清空
      clearTimeout(timer);
      timer = null;
      // 重置开始工夫
      startTime = 0;
    }
  };
  return _throttle;
}

const inputEl = document.querySelector("input");
const cancelBtn = document.querySelector("button");

// 传入回调函数用于接管返回值
const _throttle = throttle(inputEvent, 2000, {
    leading: false,
    trailing: true,
    callbackFn: (value) => {console.log("获取返回值", value);
    },
});
inputEl.oninput = _throttle;
cancelBtn.onclick = _throttle.cancel;

每执行一次响应函数，就会执行一次回调函数。

promise
通过返回 promise 的模式来获取返回值

function throttle(fn, interval, options = {}) {
  let startTime = 0;
  // 设置一个计时器
  let timer = null;
  // leading 默认值设置为 true，trailing 默认值设置为 false
  const {leading = true, trailing = false} = options;
  const _throttle = function (...args) {
    // 通过 promise 来返回后果
    return new Promise((resolve, reject) => {let currentTime = new Date().getTime();
      // 不须要立刻执行时，将初始值为 0 的 startTime 批改为以后工夫
      if (!leading && !startTime) {startTime = currentTime;}
      let restTime = interval - (currentTime - startTime);
      if (restTime <= 0) {
        // 当存在计时器时，清空计时器
        if (timer) {clearTimeout(timer);
          timer = null;
        }
        // 获取执行函数的后果
        const result = fn.apply(this, args);
        // 通过 resolve 返回胜利的响应
        resolve(result);
        startTime = currentTime;
        return;
      }
      if (trailing && !timer) {timer = setTimeout(() => {
          timer = null;
          // 获取执行函数的后果
          const result = fn.apply(this, args);
          // 通过 resolve 返回胜利的响应
          resolve(result);
          // 当须要立刻执行时，开始工夫赋值为以后工夫，反之，赋值为 0
          startTime = !leading ? 0 : new Date().getTime();
        }, restTime);
      }
    });
  };
  // 在函数对象上定义一个勾销的办法
  _throttle.cancel = function () {if (timer) {
      // 当存在计时器时，清空
      clearTimeout(timer);
      timer = null;
      // 重置开始工夫
      startTime = 0;
    }
  };
  return _throttle;
}

// 获取 dom 元素
const inputEl = document.querySelector("input");
const cancelBtn = document.querySelector("button");

const _throttle = throttle(inputEvent, 2000, {
    leading: false,
    trailing: true,
});

// apply 用于将 this 指向 input 元素
const promiseCallback = function (...args) {_throttle.apply(inputEl, args).then((res) => {console.log("promise 回调", res);
    });
};

// 绑定事件
inputEl.oninput = promiseCallback;
cancelBtn.onclick = _throttle.cancel;

promise 调用 then 办法获取返回值

在开发中应用节流函数优化我的项目的性能，能够按如上形式自定义，也能够应用第三方库。

对于防抖函数，能够参考这一篇文章，自定义防抖函数五步应答简单需要

以上就是防抖函数相干内容，对于 js 高级，还有很多须要开发者把握的中央，能够看看我写的其余博文，继续更新中~

正文完
前端
发表至： 前端
2022-02-12
 0
关于前端:快速制作响应式的个人主页效果案例
关于前端:前端监控监控SDK手摸手Teach微信小程序篇已开源
关于前端:umi使用proxy代理解决跨域问题
关于前端:render-函数是怎么来的深入浅出-Vue-中的模板编译