小程序按钮防抖和节流

js实现防抖和节流网上写法大都雷同，踩坑之处都不带重样的，这里为了后来人方便记录一下，
在面试题中，一般将防抖 说到 闭包写法 函数嵌套函数 加个定时器就可以
实现起来也是这么回事，
防抖使用场景：按钮点击、输入框搜索、滚动事件
节流场景：DOM元素拖拽、运动事件

// util.js里封装方法
// 防抖函数
function debounce(fn, wait) {
  var timer = null;
  return function () {
      var context = this
      var args = arguments
      if (timer) {
          clearTimeout(timer);
          timer = null;
      }
      timer = setTimeout(function () {
          fn.apply(context, args) //保持this和参数
      }, wait)
  }
}

//节流函数
function throttle(fn, gapTimes) {
  const gapTime = gapTimes || 1500
  let _lastTime = null
  // 返回新的函数
  return function () {
    let _nowTime =  new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn.apply(this, arguments) //将this和参数传给原函数
      _lastTime = _nowTime // 点击一次是会执行一次  但在这里进行了判断赋值 把现在时间给上一次时间  当下一次再点击时  现在时间减去上一次时间 如果大于设定间隔时间  才执行  fn()函数  传入的fn  才是我要执行的函数体
    }
  }
}

页面中引入 ，此处以小程序为例

// 引入util  const util = require('../util')
 handleUpgrade: util.throttle(function (e) {
    console.log(this)
    console.log(e)
    console.log((new Date()).getSeconds())
}, 3000)

这篇好文章是转载于：学新通技术网