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

概念

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

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

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

举例

以百度搜索为例:用户搜索输入时,边输入会边提示搜索内容,如下:
JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例_第1张图片
从网络请求来看,百度是监听了键盘输入,按一次键就发一次请求,如下:
JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例_第2张图片
对于百度来说,这样自然没什么问题,毕竟服务器强大,这点消耗不算什么,但在我们看来,有什么可以优化的呢?
方案一:在用户没有输入的m毫秒后再发送请求(函数去抖)
方案二:在用户没有输入的m毫秒后再发送请求,但期间每隔n毫秒会自动发一次请求(函数节流)

函数去抖实现

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


<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>

运行结果:
JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例_第3张图片

函数节流实现

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


<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>

运行结果:
JavaScript函数节流(throttle)与函数去抖(debounce)解析与应用举例_第4张图片
相关解释请参考代码中的注释。

你可能感兴趣的:(JavaScript,前端解决方案)