干货--项目中封装好的防抖节流方法

2021-09-24 16:30:20 阅读：225 来源： 互联网

标签：function 防抖节流 -- interval clearTimeout timer fn

为什么需要防抖节流：
开发中经常容易遇到一些持续发生的事件，比如scroll, resize, input, mousemove等，频繁的执行回调，造成页面性能的损耗，页面容易卡死，这时候就有两种解决方法，防抖和回流

防抖：
事件触发后的time时间内只执行一次。原理是维护一个延时器，规定在time时间后执行函数，如果在time时间内再次触发，则取消之前的延时器重新设置。所以回调只在最后执行一次。

clearTimeout() 方法
可取消由 setTimeout() 方法设置的 timeout
语法：clearTimeout(id_of_settimeout)
id_of_settimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

function debounce(interval = 400, immediate = false) {
  let timer
  return function (fn) {
    if (immediate) {
      immediate = false
      fn && fn()
      return
    }
    window.clearTimeout(timer)
    timer = window.setTimeout(() => {
      window.clearTimeout(timer)
      fn && fn()
    }, interval)
  }
}

页面调用：

**引用：**
  mounted() {
    this.debounceHandler = debounce(400, false)
  },
**项目中具体使用：**
   this.debounceHandler(() => {
	...
   })
   // 此效果是事件触发的400ms后函数只执行一次

节流：
在事件触发过程中，每隔time执行一次回调

function throttle(interval = 400) {
  let lastTime = 0
  return function (fn) {
    const currentTime = new Date().getTime()
    if (currentTime - lastTime >= interval) {
      lastTime = currentTime
      fn && fn()
    }
  }
}

标签：function,防抖,节流,--,interval,clearTimeout,timer,fn
来源： https://blog.csdn.net/m0_52009348/article/details/120457626

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

干货--项目中封装好的防抖节流方法