什么是防抖？什么是节流？以及应用场景-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46486849/article/details/126356576

本文介绍了防抖和节流的概念及其应用场景。防抖技术用于限制函数的执行频率，如登录、发短信按钮防止多次请求，而节流则确保在设定的时间间隔内只执行一次任务，适合用于scroll事件或浏览器播放事件。文中提供了JavaScript实现防抖和节流的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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

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

文章目录

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

2、先来看防抖代码

3、节流

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

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