underscore.js 防抖封装 #47

huangchucai · 2018-01-03T06:50:02Z

underscore.js 防抖设置

在实际的工作中，我们经常会遇到限制客户多次点击，多次滑动而重复提交代码的过程，为了能够有效的防止这种情况，我们今天来讨论应该如何处理节流的控制。

前言

setTimeout和clearTimeout：

// clearTimeout 虽然取消了定时器，但是timer并没有取消，只是如果你没有引用，就会被垃圾回收。
  let timer = setTimeout('console.log(11)')
  clearTimeout(timer)
  console.log(timer) // 20  一个数字

实例重现

我们现在用户从屏幕的一端滑动另外一端,刚开始count为 1，但是最后为165，就是说，如果这里面是一个复杂的ajax请求，用户在短短几秒的过程中，请求了接口165次，假如每次接口的返回的时间是300ms,想想，结果是什么，结果就是用户会被卡死，作为一个好的开发人员，我们是不是应该阻止这样的情况发生？

  <style>
    .container {
      background-color: black;
      color: white;
      padding: 100px 0;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="container"></div>
  <script>
    let count = 1
    const container = document.querySelector('.container');
    function getUserAction() {
      container.innerHTML = count++;
      return 'getUserAction'
    };
    
    container.addEventListener(mousemove, getUserAction)
  </script>
</body>

解决这样的方式一般有二种情况

防抖控制debounce
节流控制throttle

防抖控制

上面说了，主要就是二种情况，我们今天来讨论下防抖控制

**原理：**在一段时间内（n秒），不管用户怎么点击，我都不会触发，只有等到n秒后才会执行，如果中途n秒内，用户又再次点击，那我就以用户新点击的时间开始重新计算，n秒后才执行。总之：就是在用户触发完事件后，n秒内不再触发，我才执行事件，我就是任性！！！

防抖第一版

我们根据原理可以实现一个函数：

function debounce(func, wait) {
  let timer
  return function() {
    if(timer) clearTimeout(timer)
    timer = setTimeout(func, wait)
  }
}
container.addEventListener(mousemove, debounce(getUserAction, 1000))

这样处理后，在一秒内，用户重新触发事件的话，都不会执行，只有在最后一次触发1s后才会触发事件。

防抖第二版

研究一个函数的时候，我们都知道参数和this，很重要，所有这里我们也需要处理getUserAction函数内部的this和参数。

如果我们按照第一版不处理的话，getUserAction内部的this就是window了，但是根据事件触发的this规则，this应该指向事件触发的dom元素。

加入this：

function debounce(func, wait) {
  let timer, context
  return function() {
    context = this
    if(timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(context)
    }, wait)
  }
}
container.addEventListener(mousemove, debounce(getUserAction, 1000))

处理完this后，是不是要思考每一个事件处理都是有一个事件参数e，我们也需要把这个参数e传入到getUserAction内部，方便我们处理。

处理参数：

function debounce(func, wait) {
  let timer, context
  return function(...args) {
    context = this
    if(timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(context,args)
    }, wait)
  }
}
container.addEventListener(mousemove, debounce(getUserAction, 1000))

防抖第三版

突然老板来了一个新需求，我不想等n秒后执行，我想立刻执行事件触发，但是n秒内不再触发，自己想想好像也是合理的需求。

所有我们给debounce添加一个参数来控制是立即执行还是n秒后再执行

function debounce(func, wait, immediate) {
  let timer, context
  return function(...args) {
    context = this
    if(timer) clearTimeout(timer)
    if(immediate) {
      // 控制是否已经执行过
      call = !timer
      timer = setTimeout(() => {
        timer = null
      },wait)
      if(call) {
        func.apply(this,args)
      } 
    } else {
      timer = setTimeout(() => {
      	func.apply(context,args)
      }, wait)
    }
  }
}

这样处理后，我们就可以根据immediate的值，来用2种方法来执行。

防抖第四版

每一个函数都有一个返回值，getUserAction的返回值如果需要被利用呢？当不是直接执行的时候（immediate=false）讨论返回值没有意义，一直都是undefined(异步)，所以只有立即执行的时候，才有返回值。

function debounce(func, wait, immediate) {
  let timer, context, result
  return function(...args) {
    context = this
    if(timer) clearTimeout(timer)
    if(immediate) {
      // 控制是否已经执行过
      call = !timer
      timer = setTimeout(() => {
        timer = null
      },wait)
      if(call) {
        result = func.apply(this,args)
      } 
    } else {
      timer = setTimeout(() => {
        func.apply(context,args)
      }, wait)
    }
    return result
  }
}

做到这里，一个基本的防抖封装已经完成了，一大部分的情况都可以处理了，但是有没有想到过一种情况，现实工作中，就是让用户点击一个按钮，取消等待，继续触发函数？

防抖第五版

最后我们再思考一个小需求，我希望能取消 debounce 函数，比如说我 debounce 的时间间隔是 10 秒钟，immediate 为 true，这样的话，我只有等 10 秒后才能重新触发事件，现在我希望有一个按钮，点击后，取消防抖，这样我再去触发，就可以又立刻执行啦，是不是很开心？

function debounce(func, wait, immediately) {
  let timer
  let debounced =  function (...args) {
    let result
    // 清除闹钟后，闹钟还是存在的
    if (timer) clearTimeout(timer)
    if (immediately) {
      let called = !timer
      timer = setTimeout(() => {
        timer = null
      }, wait)
      if (called) {
        result = func.apply(this,args)
      }
    } else {
      timer = setTimeout(() => {
        func.apply(this, args)
      }, wait)
    }
    return result
  }
  debounced.cancel = function() {
    clearTimeout(timer)
    timer = null
  }
  return debounced
}

那么如何使用呢？

let action = debounce(getUserAction, 100000, true)
container.addEventListener('mousemove', action)
btn.addEventListener('click', action.cancel)

恭喜你，完成了一个防抖的封装。

源码地址

点击这里

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

underscore.js 防抖封装 #47

underscore.js 防抖封装 #47

huangchucai commented Jan 3, 2018

underscore.js 防抖封装 #47

underscore.js 防抖封装 #47

Comments

huangchucai commented Jan 3, 2018

underscore.js 防抖设置

前言

实例重现

防抖控制

防抖第一版

防抖第二版

防抖第三版

防抖第四版

防抖第五版

源码地址