码迷,mamicode.com
首页 > 其他好文 > 详细

防抖(debounce)和节流(throttle)

时间:2019-06-29 12:57:10      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:res   时间   function   rgs   settime   动作   arguments   lse   else   

防抖(debounce)

当调用动作触发一段时间后,才会执行该动作,若在这段时间间隔内又调用此动作则将重新计算时间间隔

 

function debounce(method, timeout, context) {
  return function() {
    var args = arguments
    clearTimeout(method.timer)
    method.timer = setTimeout(() => {
      method.apply(context, args)
    }, timeout)
  }
}
function handleResize() {
  console.log(‘resize‘)
}
window.onresize = debounce(handleResize, 500, window)

 

节流(throttle)

预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新的时间周期

function throttle(method, timeout, context, cycle) {
  var startTime = +new Date()
  return function() {
    var args = arguments
    var currTime = +new Date()
    clearTimeout(method.timer)
    if (currTime - startTime >= cycle) {
      method.apply(context, args)
      startTime = currTime
    } else {
      method.timer = setTimeout(() => {
        method.apply(context, args)
      }, timeout)
    }
  }
}
function handleResize() {
  console.log(‘resize‘)
}
window.onresize = throttle(handleResize, 500, window, 2000)

 

防抖(debounce)和节流(throttle)

标签:res   时间   function   rgs   settime   动作   arguments   lse   else   

原文地址:https://www.cnblogs.com/zhoulixue/p/11106010.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!