js节流、防抖原理、代码及使用环境

在前端开发中，会遇到一些频繁触发的事件监听器（scroll、mousemove、resize）

这样会频繁的调用JS，造成卡顿、更严重的性能问题

• 防抖：

  在事件触发 N 秒后调用事件，如果这 N 秒内又被触发，则重新计时
  • let debounce = function(fn,wait){ console.log('sdsfdsf'); let timeout return function(){ let context = this let args = arguments if(timeout) { // 触发事件发生，会一直生成 -> 清除 // 直至最后一次才会真正执行 clearTimeout(timeout) } timeout = setTimeout(()=>{ fn.apply(context,args) },wait) } } document.addEventListener('mousemove',throttle(changeCount,2000))
  • 应用场景:用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求

• 节流：

  每 N 秒内只能触发一次事件
  • let throttle = function(fn,wait){ let start = new Date().getTime() // 这里可以用 Date.now() let cur console.log('调用了'); return function(){ cur = new Date().getTime() let context = this let args = arguments console.log(start,cur); if(cur - start >= wait) { // 当前事件 - 上一次调用事件 > 间隔事件调用 fn.apply(context,args) start = new Date().getTime() //调用后，更新开始时间 } } }
  • 应用场景:鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次