JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例

概念

函数防抖（debounce）：
事件响应函数在一段时间后才会执行，如果在这段时间内再次调用，则重新计算执行时间；当预定时间内没有再次调用该函数，则执行响应逻辑。

函数节流（throttle）：
可以理解为在函数防抖上多加了一个功能：函数节流会预定一个自动执行时间，到时自动执行一次。

共同点：
函数节流与函数防抖都是为了限制函数的执行频次，是一种性能优化的方案，比如应用于window对象的resize、scroll事件，拖拽时的mousemove事件，文字输入、自动完成的keyup事件。

举例

以百度搜索为例：用户搜索输入时，边输入会边提示搜索内容，如下：
这里写图片描述
从网络请求来看，百度是监听了键盘输入，按一次键就发一次请求，如下：

对于百度来说，这样自然没什么问题，毕竟服务器强大，这点消耗不算什么，但在我们看来，有什么可以优化的呢？
方案一：在用户没有输入的m毫秒后再发送请求（函数去抖）
方案二：在用户没有输入的m毫秒后再发送请求，但期间每隔n毫秒会自动发一次请求（函数节流）

函数去抖实现

实现用户停止输入1秒后开始发送搜索请求，以下实现不注重样式，仅实现需求。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>函数去抖</title>
</head>
<body>
  <h4>函数去抖实现</h4>
  <input type="text">
  <div class="show"></div>
</body>
<script>
  var input = document.getElementsByTagName('input')[0]
  input.addEventListener('keyup', function () {
    debounce(doSearch, window, this.value)
  })

  function doSearch (searchText) {
    var p = document.createElement('p')
    p.innerText = '当前搜索内容： ' + searchText
    document.getElementsByClassName('show')[0].appendChild(p)
  }

  function debounce (fn, context, searchText) {
    clearTimeout(this.timer) // 关键点：1000ms内重复调用则清除timer
    this.timer = setTimeout(function() {       
      fn.call(context, searchText)       // 调用函数fn，context为fn所属作用域
    }, 1000)   
  }
</script>
</html>

运行结果：
这里写图片描述

函数节流实现

以下实现用户停止输入2秒后发搜索请求，期间每隔500ms发一次搜索请求。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>函数节流</title>
</head>
<body>
  <h4>函数节流实现</h4>
  <input type="text">
  <div class="show"></div>
</body>
<script>
  var input = document.getElementsByTagName('input')[0]
  input.addEventListener('keyup', function() {
    throttle(doSearch, window, this.value, 500, 2000)
  })
  function doSearch (searchText) {
    var p = document.createElement('p')
    p.innerText = '当前搜索内容： ' + searchText
    document.getElementsByClassName('show')[0].appendChild(p)
  }
  // (调用方法, 方法所属对象, 自动执行时间, 最大延迟执行时间 ))
  function throttle (fn, context, searchText, autoDoTime, delay) {
    clearTimeout(fn.timer)
    // 记录当前时间
    fn.currentTime = Date.now()
    // 若该函数是第一次调用，则直接设置startTime,即开始时间，为currentTime，即此刻的时间
    if(!fn.startTime){      
      fn.startTime = fn.currentTime
    }
    // 大于等于自动执行时间，调用方法
    if(fn.currentTime - fn.startTime >= autoDoTime){
      fn.call(context, searchText)
      fn.startTime = fn.currentTime
    } else {
        // 大于最大延迟时间，调用方法
        fn.timer = setTimeout(function(){
        fn.call(context, searchText)
      }, delay)
    }
  }
</script>
</html>

运行结果：
这里写图片描述
相关解释请参考代码中的注释。