浅谈JS防抖与节流
目录
1、名称解释
防抖：防抖就是防止抖动，避免事件的重复触发。
应用场景：
①点击按钮事件，用户在一定时间段内的点击事件，为了防止和服务端的多次交互。
②输入框的自动保存事件
③浏览器的resize事件
节流：节流就是减少流量，将频繁触发的事件减少，控制事件触发的频率。
应用场景：
①scroll事件，滚动的过程中每隔一段时间触发事件。
2、实现代码
（1）防抖代码
<!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>JS防抖代码示例</title>
</head>
<body>
<input type="text" value="" placeholder="请输入搜索关键词">
<script>
let dom = document.querySelector("input"); //获取input Dom对象
dom.oninput = debounce(function() { //实时监听input输入框变化
console.log(this.value) //业务逻辑
}, 500)
//防抖代码
//fn:业务逻辑函数
//delay:间隔时间
function debounce(fn, delay) {
let t = null; //初始化定时器为空
return function() {
if (t != null) { //如果定时器不为空
clearTimeout(t); //清除定时器
}
t = setTimeout(() => {
fn.call(this);
}, delay)
}
}
</script>
</body>
</html>（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>JS节流代码示例</title>
<style>
body {
height: 3000px;
}
</style>
</head>
<body>
<script>
window.onscroll = throttle(function() { //监听滚动条下滑事件
console.log("业务逻辑执行"); //业务逻辑
}, 500)
//防抖代码
//fn:业务逻辑函数
//delay:间隔时间
function throttle(fn, delay) {
let flag = true; //定义一个标识符
return function() {
if (flag) { //如果为True
setTimeout(() => {
fn.call(this); //执行业务逻辑
flag = true; //标识设置为True
}, delay);
}
flag = false; //否则,标识符设置为False
}
}
</script>
</body>
</html>3、归纳总结
防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
节流：高频事件触发，但在n秒内只会执行一次，节流会稀释函数的执行频率
浙公网安备 33010602011771号