3什么是防抖和节流？有什么区别？如何实现？
Posted 沿着路走到底
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3什么是防抖和节流？有什么区别？如何实现？相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
防抖输入：<input type="text" id="inp">
节流输入：<input type="text" id="inp1">
</body>
</html>
<script>
/*
防抖
触发高频事件后n秒内函数只执行一次，如果n秒内防抖再次被触发，则重新计算时间
思路：每次触发事件时都取消之前的延时调用方法
应用场景：例如防止重复调用接口
*/
let inp = document.getElementById('inp')
inp.addEventListener('input', debounce(sayHi)) // 防抖
function sayHi ()
console.log('防抖成功')
function debounce (fn, delay)
let timeout = null // 创建一个标记用来存放定时器的返回值
return function ()
clearTimeout(timeout) // 每当用户输入的时候，把前一个 setTimeout clear 掉
/*
然后又创建一个新的setTimeout，
这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，
就不会执行 fn 函数
*/
timeout = setTimeout(() =>
fn()
, delay)
/*
节流
高频时间触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
思路：每次触发事件时，都判断当前是否有等待执行的延时函数
*/
let inp1 = document.getElementById('inp1')
inp1.addEventListener('input', throttle(sayHi1)) // 节流
function sayHi1 ()
console.log('节流成功')
function throttle (fn, delay)
let canRun = true // 通过闭包保存一个标记
return function ()
if (!canRun) return // 在函数开头判断 canRun 是否为true, 不为true则return
canRun = false // 立即设为false
/*
将外部传入的函数的执行放在setTimeout中
*/
setTimeout(() =>
fn()
/*
最后在setTimeout执行完毕后，再把标记设置为true,表示可以执行下一次循环了
当定时器没有执行的时候，标记永远是false,在开头被return掉
*/
canRun = true
, delay)
</script>
以上是关于3什么是防抖和节流？有什么区别？如何实现？的主要内容，如果未能解决你的问题，请参考以下文章