2021-11-23前段时间楼主在学习过程中,又学习到了不同的节流,今天才想起写上来,惭愧惭愧
节流
节流简单来说就是在当前函数完成前的重复多次点击当中,只执行第一次点击,在第一次点击完成前,后面的点击都会无效
- 节流有多种不同应用场景的表现形式,一般可以分为三种,分别是首节流,尾节流,兼顾型节流。
- 首节流,第一次会马上执行,之后的操作不一定会执行。可以理解问第一次执行,最后一次不执行。
- 尾节流,第一次不会马上执行,而是一段时间后在执行。可以理解为第一次不执行,最后一次执行。
- 兼顾型节流,第一次会马上执行,最后一次也会执行。
- 概念不理解的可以先看代码就一目了然啦。
首节流
function throttle(fn, delay){
let last=0;
return function(){
let now=Date.now();
if(now-last>delay){
fn.apply(this, arguments);
last=now;
}
}
}
复制代码
以上代码不难看出,在第一次操作的时候就会执行一遍fn,之后的操作如果时间不超过delay(例如2s)就不会在执行函数,理解为第一次执行,最后一次不执行。
尾节流
function throttle(fn, delay) {
let timer = null;//通过闭包使变量timer存在着
return function () {
let context = this; //使下面的apply有正确的指向
let args = arguments;
if (!timer) {
timer = setTimeout(function () {
//使用箭头函数,就不用使用apply来改变this指向
fn.apply(context, args);
timer = null;
}, delay);
}
}
}
复制代码
尾节流中,第一次是不会直接执行的,而是在一段时间后再执行。理解为第一次不执行,最后一次执行。
兼顾型节流
function throttle(fn, delay){
let last=0;
let timer=null;
return function(){
let now=Date.now();
let reming=delay-(now-last);
clearTimeout(timer);//不管三七二十一,有定时器都先清除定时器
if(reming<0){
fn.apply(this, arguments);
last=now;
}else{
timer=setTimeout(()=>{
fn.apply(this,arguments);
}, reming);
}
}
}
复制代码
兼顾型节流,就能够在第一次,最后一次都执行代码。
各有自身的应用场景。
防抖
防抖跟节流正好相反,防抖是在多次点击中,只执行最后一次,前面的点击都会被取消
function debounce(fn, delay) {
let timer = null;
return function () {
clearTimeout(timer);
let context = this;
let args = arguments;
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
}
}
复制代码
防抖与节流一般在哪里使用
防抖
当用户在短时间内,多次点击登陆,发送短信等请求数据的操作时 文本编辑器一段时间不操作,进行自动保存 搜索框进行联想,用户不断输入值,只在停顿1s时才进行联想
节流
鼠标mouseover事件,只执行一次时 浏览器滚动,每隔1s才计算一次位置信息,避免边滚动边计算