js节流与防抖

节流:防止频繁执行某函数,两次执行需要间隔时间(比如滚动)
防抖:防止多次发生,重复执行(比如按钮重复提交数据)

// 重点是使用闭包锁住变量的值
// 防抖
function debounce(fn, wait) {
  var timer = null
  return function() {
    if(timer) clearTimeout(timer)
    setTimeout(fn, wait)
  }
}
// 节流
function throttle(fn, delay) {
  var prev = Date.now()
  return function() {
    var context = this,
      args = arguments,
      now = Date.now();
    if(now - prev >= delay) {
      fn.apply(context, args)
      prev = Date.now()
    }
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 函数节流 在一段时间内,只能触发一次函数,如在这段时间内多次触发,也只能执行一次。 举个栗子🌰我们在打王者时,当英...
    浪味仙儿啊阅读 291评论 0 2
  • 现在大多数项目都在用React或者Vue,再配套一个UI库,快速搭建一个系统,的确方便了日常开发工作。我们在拥抱框...
    勇敢快乐的风筝阅读 276评论 0 0
  • 节流(时间戳):一个函数执行一次后,只有大于设定的时间,才会执行第二次。 防抖(定时器):频繁的触发函数,在规定的...
    抽疯的稻草绳阅读 369评论 0 0
  • 事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器...
    oWSQo阅读 431评论 0 6
  • debounce:防抖--------让在用户动作停止后延迟x ms再执行回调 throttle:节流------...
    浅秋_6672阅读 1,463评论 0 1