节流：在《高程》上定义，某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器
并设置另一个.
节流的目的：只有在执行函数请求的一段时间之后才执行.
我的理解：在规定时间内只触发一次.
例子：滑动滚动条触发分页时,不可能时时刻刻只要一分页就触发ajax,这样对服务器很不友好.
1.0版本节流：
var processor = {
timeoutId = null,
//实际处理的代码
performProcessing:function(){
//写业务逻辑
},
//正在的节流重点
process:function(){
//清除上一个计时器,来阻止之前的调用被执行
clearTimeout(timeoutId);
//创建一个新的计时器调用
this.timeoutId = setTimeout(()=>{
this.performProcessing();
},100)
},
}
processor.process()
//表示100ms之内只执行了一次performProcessing()方法
//即使100ms内 调用了50次process方法,performProcessing也只会执行一次
2.0版本节流:(面试要求手写的节流基本都是这个)
function throttle(method,context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
//确保定时器在适当的环境中执行
method.call(context)
},100)
}
//method:要执行的函数 context:在哪个作用域上执行
3.0版本节流:(有手就行 直接用)
//我借鉴(偷了)了下掘金大佬的代码
//本质上就是在规定时间差内 不能再触发,有种简单的方法就是根据Date来计算就好了,而不用到计时器
const throttle = (fn,delay)=>{
let oldDate = Date.now();
return function(){
let args = arguments;
let newDate = Date.now();
let that = this;
if(newDate-oldDate>delay){
fn.apply(this,args);
//倘若时间差大于延长时间 就更新一次旧时间
oldDate = Date.now();
}
}
}
如何使用
在小程序的until.js或其他js文件上定义节流方法
然后在需要使用的地方
即可
先知道怎么用,再去理解原理是什么。
如果帮助了小伙伴们的话 点个赞哦~