初探函数节流和函数防抖—以项目为例(更新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值，若是达到了，就执行一次回调。没有则不执行。