0
点赞
收藏
分享

微信扫一扫

浅谈JS防抖与节流


目录

​​1、名称解释 ​​

​​2、实现代码​​

​​(1)防抖代码​​

​​(2)节流代码​​

​​3、归纳总结​​

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秒内只会执行一次,节流会稀释函数的执行频率


举报

相关推荐

JS 节流与防抖

JS—节流与防抖

JS函数防抖与节流

js手写防抖与节流

js中的防抖与节流

节流与防抖

js防抖和节流

JS防抖节流函数

防抖与节流

0 条评论