都用到了闭包 return 一个 function
image.png
防抖
什么是防抖?
事件不断发生，最后一次生效。比如：联想搜索，不断输入，停下多少秒后才去发起请求！
核心
定时器，1s后才能再次点击
原理
每次点击，清除上一个定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防抖</title>
</head>
<body>
<button id="debounce">点我防抖！</button>
<script>
window.onload = function(){
var btn = document.querySelector("#debounce");
btn.addEventListener("click", deBounce(myFn));
}
// 防抖功能函数
// 原理： 每次点击，清除上一个定时器
function deBounce(fn, wait){
var timer = null;
return function(){
clearTimeout(timer); // 1秒内的连续点击，没机会执行函数的！
timer = setTimeout(function(){
fn.call(this, ...arguments); // 接受传参
}, wait)
}
}
// 需要进行防抖的事件
function myFn(){
console.log(1);
}
</script>
</body>
</html>
节流
什么是节流
至少多少秒才能进行下一个事件
核心：
用一个标记来判断是否在指定时间内执行
节流就不要去清除定时器了哈～
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>防抖</title>
</head>
<body>
<button id="obj">点我节流！</button>
<script>
window.onload = function() {
var obj = document.querySelector("#obj");
obj.addEventListener("click", jieliu(myFn));
};
function jieliu(fn) {
var canRun = true;
return function() {
if (!canRun) return; // 2秒内的连续点击，直接return；要等第一次的先去执行完！
canRun = false;
setTimeout(() => {
fn.call(this, arguments);
canRun = true;
}, 2000);
};
}
function myFn(){
console.log("最多 1s 执行一次！")
}
</script>
</body>
</html>
网友评论