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

news/2024/12/13 2:39:49/

文章目录

- 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 = nullreturn 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 = truereturn function (...args) {if (!flag) {return}flag = falsesetTimeout(() => {fn.apply(this, args)flag = true}, delay)}}btn.addEventListener('click', throttle((e) => {console.log(1)}, 1000))
</script></html>