js防抖和节流
2023-07-18 本文已影响0人
扶得一人醉如苏沐晨
为什么要防抖
- 有的操作是高频触发的，但是其实触发一次就好了，
- 比如我们短时间内多次缩放页面，那么我们不应该每次缩放都去执行操作，应该只做一次就好。
- 再比如说监听输入框的输入，不应该每次都去触发监听，应该是用户完成一段输入后在进行触发。
防抖就是防止抖动，避免事件的重复触发
总结：等用户高频事件完了，再进行事件操作。
防抖怎么做
image.png
设计思路：事件触发后开启一个定时器，如果事件在这个定时器限定的时间内再次触发，则清除定时器，在写一个定时器，定时时间到则触发。
<body>
<button onclick="trigger()">点击触发</button>
</body>
<script>
/* 防抖---不要打断我回城
delay ---- 回城的时间
*/
function debounce(fn, delay) {
let timer = null;
return function () {
/* 只要打断回城---就重新计时delay */
clearTimeout(timer);
timer = setTimeout(() => {
/* call bind apply---改变this指向
参数回调出去 this,arguments这俩是每一个函数都有的隐形参数
arguments是支持for of 迭代 但不支持forEach
apply改变this指向---不会自动执行函数---参数是以数组的形式传递arguments
*/
fn.apply(this, arguments);
}, delay);
};
}
let myDebounce = debounce(doSomething, 2000);
/* 点击事件 */
function trigger() {
console.log("点击触发");
myDebounce();
}
/* 真正要执行的逻辑 */
function doSomething() {
console.log("doSomething");
}
</script>
为什么要节流
防抖存在一个问题
事件会一直等到用户完成操作后一段时间在操作，如果一直操作，会一直不触发。比如说是一个按钮，点击就发送请求，如果一直点，那么请求就会一直发布出去。
这里正确的思路
应该是第一次点击就发送，然后上一个请求回来后，才能再发。
节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行。即，控制事件触发的频率
总结：某个操作希望上一次的完成后再进行下一次，或者希望隔一段时间触发一次。
节流怎么做?
image.png
设计思路：
我们可以设计一种类似控制阀门一样定期开放的函数，事件触发时让函数执行一次，然后关闭这个阀门，过了一段时间后再将这个阀门打开，再次触发事件。
<body>
<button onclick="trigger()">点击触发</button>
</body>
<script>
/* 一开始就触发---后续每隔delay时间内只触发一次 */
function throttle(fn, delay){
let valid = true;
return function(){
if(valid) { //如果阀门已经打开，就继续往下
setTimeout(()=> {
fn.apply(this, arguments);//定时器结束后执行
valid = true;//执行完成后打开阀门
}, delay)
valid = false;//关闭阀门
}
}
}
let myThrottle = throttle(doSomething, 2000);
function doSomething() {
console.log("doSomething");
}
function trigger() {
console.log("点击触发");
myThrottle();
}
</script>
- 刚开始valid为true，然后将valid重置为false,进入了定时器
- 在定时器的时间期限之后，才会将valid重置为true
- valid为true之后，之后的点击才会生效
- 在定时器的时间期限内，valid还没有重置为true，
- 就实现了在N秒内多次点击只会执行一次的效果
应用场景
防抖：
- search搜索联想，用户在不断输入值时，用防抖来节约请求资源
- window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
节流：
- 鼠标不断点击触发，mousedown(单位时间内只触发一次)
- 监听滚动事件，比如是否滑到底部自动加载更多
总结
防抖和节流相同点：
防抖和节流都是为了阻止操作高频触发，从而浪费性能。
防抖和节流区别：
-
防抖是触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景。
-
节流是高频事件触发，但在n秒内只会执行一次，如果n秒内触发多次函数，只有一次生效，节流会稀释函数的执行频率。
插件lodash实现防抖和节流（推荐）
lodash插件：里面封装函数的防抖与节流与节流的业务【闭包+延迟器】
lodash函数库对外暴露_函数
如果没有可以安装一下
npm i --save lodash
4.1、使用
import _ from 'lodash'
语法
fn是你需要处理的方法，delay延迟时间
_.throttle(fn,delay)
_.debounce(fn,delay)
