<!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>
扫一扫
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
