防抖节流的区别 怎么实现防抖节流
防抖节流区别 怎么实现的
防抖：指在触发事件后n秒内函数只执行一次（确定不在更改时执行） 如果在n秒内再次被触发则时间会被重新计算 如:王者里面的回城 如果回城终端 则会重新计算回城时间
使用什么实现：使用闭包实现 或者lodash（使用时引入js插件）_.throttle(func函数, [wait=0等待时间], [options=这个参数可有可无])
节流：在既定时间内连续多次触发事件时 不会重新计算时间 而是将本次执行的时间 执行完成后才会再次被触发 如：短信验证码倒计时 在验证码出发后再点击也是无效的 倒计时时间不会被重新计算 而是等在既定的时间内执行完后才能再次被触发
使用什么实现：使用闭包 或者loadsh插件_.debounce(func, [wait=0], [options=]) 或者手写节流阀 loading 骨架屏
防抖节流区别：防抖在既定时间内 再次被触发后重新计算时间 再执行 而节流连续触发不会重新计算时间 只有既定时间结束后才会被再次触发事件
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
使用闭包来实现节流
// 节流:连续触发事件 但在设定时间内只会执行一次（如：短信验证码）
// 防抖:指在触发事件在n秒内只执行一次 如果在n秒内再次出发 则会重新计算时间（如：王者中的回城）
let i = 0;
const box = document.querySelector(".box");
function renderMove() {
box.innerHTML = i++;
}
// 没有节流时 动一下就会改变一下数字 开启节流阀后 在1秒后才会触发一次
box.addEventListener("mousemove", throttle(renderMove, 1000));
// 节流 0-2 时间内会加1 （约定一个时间范围只会执行一次）
function throttle(fn, time) {
let start = 0;
function fun() {
let now = +new Date();
if (now - start >= time) {
// 重新调用函数
fn();
start = now;
console.log(start);
}
}
return fun;
}
console.log(throttle(renderMove, 1000));
</script>
</body>
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
使用闭包实现防抖
const box = document.querySelector(".box");
let i = 0;
// 渲染函数 将事件函数里面的函数抽离出来
function render() {
box.innerHTML = i++;
}
box.addEventListener("mousemove", antiShake(render, 200));
function antiShake(fn, time) {
let timeId; //undefined 定时器的名字
return function () {
if (timeId) {
// 清除之前的定时器 重新经计时
clearTimeout(timeId);
}
//定时器
timeId = setTimeout(function () {
fn();
}, time);
};
}
</script>
</body>
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- 引入js插件 -->
<script src="./lodash.min.js"></script>
<script>
使用lodas插件来实现防抖节流
const box = document.querySelector(".box");
let i = 0;
function mouseMove() {
box.innerHTML = ++i;
}
// 防抖 _.debounce(func, [wait=0], [options=])
// box.addEventListener("mousemove", _.debounce(mouseMove, 500));
// 节流_.throttle(func, [wait=0], [options=])
box.addEventListener("mousemove", _.throttle(mouseMove, 1000));
</script>
</body>
