JS手写节流（throttle）函数

OnTheRoad_ING

已于 2023-04-28 14:55:44 修改

阅读量180

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言 ecmascript

于 2023-04-22 22:21:13 首次发布

本文链接：https://blog.csdn.net/OnTheRoad_ING/article/details/130311548

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JS手写节流（throttle）函数

概念

单位时间最多执行一次

/**
 * 延迟一个函数的执行
 * 单位时间最多执行一次
 * 实现功能：
 *  1. 是否立即执行
 *  2. 可以取消
 *  3. 最后一次是否执行
 * 参数：
 *  1. 被防抖的函数  fn   
 *  2. 间隔的时间   interval
 *  3. { 
 *  	 1. 首次执行     leading
 *  	 2. 最后一次执行  trailling
 * 	   }
 *  4. 回调函数     callback
 * 
 * */

function myThrottle(fn, interval, { leading = true, trailling = true } = {}, callback) {

  let timer = null
  let lastTime = 0
  function _throttle(...args) {
    return new Promise((resolve, reject) => {
      try {
        if (timer) {
          clearTimeout(timer)
          timer = null
        }

        const nowTime = Date.now()

        if (!leading && !lastTime) lastTime = nowTime

        const remainTime = interval - (nowTime - lastTime)
        if (remainTime <= 0) {
          const res = fn.apply(this, args)
          callback(res)
          resolve(res)
          lastTime = nowTime
          return
        }

        if (trailling && !timer) {
          timer = setTimeout(() => {
            const res = fn.apply(this, args)
            callback(res)
            resolve(res)
            lastTime = !leading ? 0 : nowTime
          }, remainTime);
        }
        if (!trailling && !timer && !leading) {
          timer = setTimeout(() => {
            lastTime = 0
          }, interval);
        }
      } catch (err) {
        reject(err)
      }
    })
  }

  return _throttle
}