初探函数节流和函数防抖—以项目为例(更新es6语法)

一 项目需求

最近在做一些小的练手代码的时候，碰到了一个很常见的问题，当在搜索框中进行搜索的时候，如果快速输入很多字符的话，搜索框的监听回调函数会执行很多次，如果回调业务较复杂的话，可能会导致页面运行缓慢甚至是奔溃，那么我们如何解决这个问题呢，让输入框在不在输入的情况下执行回调，或者每间隔一段时间执行一次回调都可以解决这一问题。而上述两种方法，就叫做函数的节流和防抖。

二 函数节流和函数防抖

2.1 函数节流

函数节流：函数节流是让这个函数在间隔某一段时间执行一次。以输入框为例，假设你想查询xxxx,你想实现当我开始输入多少秒之后，执行查询操作。（并不一定要输入完毕）
想看效果请点击这里

2.2 函数防抖

函数防抖：函数防抖是让这个函数在执行上一次之后过了你规定的时间再执行的一种方法。以输入框为例，假设你要查询xxxx，你想实现当我输完了xxxx之后，再进行查询操作，那么你就需要用到函数防抖。
经典的函数防抖实践如下：

function throttle(method,context){
  clearTimeout(method.tId)
  method.tId = setTimeout(function(){
    method.call(context) 
   },1000)
}

想看效果请点击这里

三 最佳实践

通过上叙的描述，我们对于函数防抖和函数节流有了一定的认识。在这个项目中，我认为函数节流和函数防抖都能很好的解决问题。所以这里把函数节流和函数防抖封装在了一个函数里，通过第三个参数切换模式。代码如下

const throttle = function(fn, delay, isDebounce) {
  let timer
  let lastCall = 0
  return function (...args) {
    if (isDebounce) {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn(...args)
      }, delay)
    } else {
      const now = new Date().getTime()
      if (now - lastCall < delay) return
      lastCall = now
      fn(...args)
    }
  }
}

通过第三个参数，可以控制到底使用函数防抖还是函数节流。

四 总结

函数防抖实现的核心在于每次都去clear一个延时器，然后每次执行函数的时候，都去clear以前的延时器。只有当你中断输入的时候，才会去执行相应回调。而函数节流的核心是去判断当前时间和开始时间的间隔是否到达了设置的delay值，如果达到了，就执行一次回调。没有则不执行。