javascript性能优化之debounce与throttle

消抖(debounce):

当函数被调用后，n秒之后才会触发该函数，如果在此期间函数再次被调用，则重新开始计时，n秒之后才会触发该函数。

其作用是为了避免某个事件在短时间内连续触发从而影响性能，也可用于避免在一定时间内重复提交表单等。

节流(throttle):

函数被调用后，立即触发该函数，在之后的n秒之内不能再次重复触发。

该函数可以用于限制浏览器scroll，mousemove等高频触发事件的触发频率

下面介绍debounce和throttle的实现方式

这两种方法在lodash里已经给封装好了，下面用原生js实现

debounce

利用闭包，设置一个timer：

每次执行都clearTimeout(timer)
每次执行设置timer = setTimeout()执行函数

function debounce(func, delay) {
  // 存储timer
  let timer = null
  return function() {
      // 如果已经设置了 timer，将其清空，防止未执行的timer执行
      clearTimeout(timer) 
      timer = setTimeout(()=> {

        // delay后执行函数，使用es6语法，给函数传入参数
        let args = Array.from(arguments)

        // 传入this和参数
        func.apply(this, args)

      }, delay)
  }
}

debounce实例

在input事件使用debounce，减少触发次数，这里设置延迟为1秒，是不是有点像搜索引擎的提示呈现

GIF

代码

<!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>Document</title>
</head>
<body>
  <input type="text" placeholder="debounce"/>
  <p>debounce test</p>
</body>
</html>

<script>
const input = document.querySelector('input')
const p = document.querySelector('p')
input.addEventListener('input', debounce(function(e){
  p.innerText = e.target.value
}, 1000))


function debounce(func, delay) {
  // 存储timer
  let timer = null
  return function() {
      // 如果已经设置了 timer，将其清空，防止未执行的timer执行
      clearTimeout(timer) 
      timer = setTimeout(()=> {

        // delay后执行函数，使用es6语法，给函数传入参数
        let args = Array.from(arguments)

        // 传入this和参数
        func.apply(this, args)

      }, delay)
  }
}

</script>

codepen

throttle

利用闭包，设置一个exec记录当前函数执行状态：

若正则执行，则跳过if，直接退出函数
若没有在执行，则执行函数，设置exec为true，一段时间后置为false

function throttle(func, delay) {
  // 记录当前函数是否正在被执行
  let exec = false
  return function() {
    // 如果该函数未在执行
    if (!exec){
      // 执行该函数
      let args = Array.from(arguments)
      func.apply(this, args)
      
      // 设置执行为true
      exec = true

      // 在delayh后设置为false
      setTimeout(()=>{
        exec = false
      }, delay)
    }
  }
}