什么是防抖？什么是节流？以及应用场景

92 阅读 0 评论 61 点赞

我是靠谱客的博主冷酷纸鹤，最近开发中收集的这篇文章主要介绍什么是防抖？什么是节流？以及应用场景，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

- 1、防抖是什么？什么是节流？以及应用场景
- - 2、先来看防抖代码
  - 3、节流

1、防抖是什么？什么是节流？以及应用场景

先解释下什么是防抖，防抖就是当触发一个事件不会立即执行，会等待 n 秒后再执行该事件，如果在等待 n 秒期间你再次出发，则会重新计时，也就是说防抖不管你触发多少次这个事件，永远只有一次在执行，并且执行的是最后一次，

scroll 事件，每隔一秒计算一次位置信息等浏览器播放事件，每个一秒计算一次进度信息等需要节流

2、先来看防抖代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn">click</button>
  <script>
    let btn = document.getElementById('btn')
    function debounce(fn, delay = 200) {
      let timer = null
      return function (...args) {
        if (timer) {
          clearTimeout(timer)
          timer = null
        }
        timer = setTimeout(() => {
          fn.apply(this, args)
          clearTimeout(timer)
          timer = null
        }, delay)
      }
    }
    btn.addEventListener('click', debounce((e) => {
      console.log(e.target)
    }, 1000))
  </script>
</body>
</html>

什么是节流：在触发任务的第一时间执行任务，并且设定定时器，如果在该定时器还未结束的时候还有触发任务的，也不执行，实现节流的核心是时间间隔，在设定的时间间隔内如果还有同样的任务进来，则不执行。

3、节流

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">clickMe</button>
</body>
<script>
    let btn = document.getElementById('btn')
    function throttle(fn, delay = 200) {
        let flag = true
        return function (...args) {
            if (!flag) {
                return
            }
            flag = false
            setTimeout(() => {
                fn.apply(this, args)
                flag = true
            }, delay)
        }
    }
    btn.addEventListener('click', throttle((e) => {
        console.log(1)
    }, 1000))
</script>

</html>