什么事函数节流
限制一个函数在一定时间类只能执行一次
为什么需要使用函数节流
有些函数会频繁发生,如果不做限制 耗费性能 甚至造成计算机卡死
解决方案
时间戳 获取两次时间的差值 必须大于或等于传入的参数`
function throttle(fn,wait){
var pre = Date.now();
return function(){
var context = this;
var args = arguments;
var now = Date.now();
if( now - pre >= wait){
fn.apply(context,args);
pre = Date.now();
}
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));
定时器方案
主要实现思路就是通过 setTimeout 定时器,通过设置延时时间,在第一次调用时,创建定时器,先设定一个变量true,写入需要执行的函数。第二次执行这个函数时,会判断变量是否true,是则返回。当第一次的定时器执行完函数最后会设定变量为false。那么下次判断变量时则为false,函数会依次运行。目的在于在一定的时间内,保证多次函数的请求只执行最后一次调用。
函数防抖
我们希望函数只会调用一次,即使在这之前反复调用它,最终也只会调用一次而已。比如将一个弹簧按下,继续加压,继续按下,只会在最后放手的一瞬反弹