JavaScript 防抖和节流

快乐征途

已于 2022-05-07 18:27:32 修改

阅读量74

点赞数

分类专栏： JavaScript 基础算法文章标签：防抖节流时间戳定时器前端优化

于 2021-04-15 17:04:21 首次发布

本文链接：https://blog.csdn.net/hongtoushan/article/details/115731537

版权

JavaScript 基础算法专栏收录该内容

4 篇文章 0 订阅

订阅专栏

防抖

所谓防抖，就是把触发非常频繁的的事件合并成一次去执行，即在指定的时间内只执行一次回调函数，如果在指定时间内又触发事件，重新计时

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>
<button id="btn">点击</button>
<body>
<script>
  // 防抖debounce
  function debounce(fn,delayTime) {
    let timeId;
    return function () {
      const content = this;
      const arg = arguments;
      timeId && clearTimeout(timeId);

      timeId = setTimeout(function () {
        fn.apply(content,arg)
      },delayTime)

    }
  }

  // 点击按钮调用的函数
  function fn() {
    console.log(arguments)
    console.log('防抖------')
  }
    
  const btn = document.getElementById('btn');
  btn.addEventListener('click', debounce(fn,2000))

</script>
</body>
</html>

节流

所谓节流，是指频繁触发事件时，只会在指定的时间内执行回调函数，即触发事件间隔大于等于指定的时间才会执行回调函数

时间戳实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>节流 - 时间戳实现</title>
</head>
<button id="btn">点击</button>
<body>
<script>
  // 节流throttle
  function throttle(fn, delayTime) {
    let _start = Date.now();

    return function () {
      const content = this;
      const arg = arguments;
      const _now = Date.now();

      if((_now - _start) > delayTime) {
        fn.apply(content, arg);
        _start = Date.now();
      }
    }

  }
    
  // 点击按钮调用的函数
  function fn() {
    console.log('节流--fff-----')
  }
    
  const btn = document.getElementById('btn');
  btn.addEventListener('click', throttle(fn,2000))
</script>
</body>
</html>

定时器实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>节流 - 定时器实现</title>
</head>
<button id="btn">点击</button>
<body>
<script>
  // 节流throttle
  function throttle(fn, delayTime) {
    let timeId;
    return function () {
      const context = this;
      const arg = arguments;

      if(!timeId) {
        timeId = setTimeout(function () {
          fn.apply(context,arg);
          timeId = null;
        },delayTime)
      }
    }
  }

  // 点击按钮调用的函数
  function fn() {
    console.log('节流--fff-----')
  }
    
  const btn = document.getElementById('btn');
  btn.addEventListener('click', throttle(fn,2000))
</script>
</body>
</html>

注意：

使用时间戳方式，页面加载的时候就会开始计时，如果页面加载时间大于我们设定的delayTime，第一次触发事件回调的时候便会立即fn，并不会延迟。如果最后一次触发回调与前一次触发回调的时间差小于delayTime，则最后一次触发事件并不会执行fn；
使用定时器方式，我们第一次触发回调的时候才会开始计时，如果最后一次触发回调事件与前一次时间间隔小于delayTime，delayTime之后仍会执行fn。