函数节流与函数防抖

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42681490/article/details/82421879

函数节流与函数防抖

函数节流和函数防抖,两者的目的都是为了在执行高频率js代码时的一种优化手段。

常见于页面元素滚动事件或表单验证。毕竟如果高频率的执行会影响性能。

区别

函数节流一般是利用开闭原则,在触发执行代码之后,直到代码执行结束才能被重新执行。

函数防抖则是在每次执行时都会先清除定时器,再重新执行定时器代码,在高频率触发时只有最后一次触发才会执行定时器内的代码。

函数节流(简单封装)

// 函数节流,在高频率执行时,如果没有传入第二个参数则每300ms执行一次callback
function throttle(callback, time) {
  var canDo = true
  return function () {
    if (canDo) {
      canDo = false
      setTimeout(function () {
        callback && callback()
        canDo = true
      }, time || 300)
    }
  }
}

函数防抖(简单封装)

// 函数防抖,在高频率执行时,如果没有传入第二个参数则300ms内没有再次触发才执行callback
function debouce (callback, time) {
  var timer 
  return function () {
    clearTimeout(timer)
    timer = setTimeout(function () {
      callback && callback()
    }, time || 300)
  }
}

这是我对于函数节流和防抖的理解,当然封装也可以加入promise,使用时结合async/await使用,可以使项目代码更简洁,更通俗易懂。

展开阅读全文

没有更多推荐了,返回首页