防抖和节流的区别
节流:触发函数,在规定的时间内，只触发一次，后续触发不会生效
防抖:一个频繁触发的函数，在规定的时间内触发，后续如果持续触发函数则重置时间，进行触发
节流:
<!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>
<!--
节流
触发函数,在规定的时间内,只触发第一次,后续触发不会生效
规定两秒内只触发一次
-->
<script>
// 初始时间
let data = new Date();
// let data = 0;
document.onmousemove = () => {
// 触发时间
let newDate = new Date();
// 判断触发事件 减去初始时间大于2秒才能触发
if (newDate - data > 2000) {
data = newDate
console.log(1);
};
}
</script>
</body>
</html>
防抖
<!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>
<!--
节流:
触发函数,在规定的时间内,只触发第一次,后续触发不会生效
防抖
一个频繁触发的函数,在规定的时间内触发,后续如果持续触发函数则重置时间,进行触发
-->
<input type="text" id="box">
<script>
let time; //初始化 undefined
box.oninput = ()=>{ //持续触发事件
clearTimeout(time) //第一次不需要清除 清除上一次的定时器
time = setTimeout(()=>{ //一秒之后执行定时器的内容
console.log(box.value);
// 执行代码
},400)
}
</script>
</body>
</html>
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
