函数节流 函数防抖 提高网页性能篇

什么事函数节流
限制一个函数在一定时间类只能执行一次

为什么需要使用函数节流
有些函数会频繁发生，如果不做限制 耗费性能 甚至造成计算机卡死

解决方案
时间戳 获取两次时间的差值 必须大于或等于传入的参数`

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，函数会依次运行。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用。

函数防抖
我们希望函数只会调用一次，即使在这之前反复调用它，最终也只会调用一次而已。比如将一个弹簧按下，继续加压，继续按下，只会在最后放手的一瞬反弹