防抖&节流

一、节流（定时循环发车）

防止太短时间内事件多次触发 而 造成计算机资源浪费，降低程序运行速度。重复的 ajax 调用不仅可能会造成请求数据的混乱，还会造成网络拥塞，占用服务器带宽，增加服务器压力。

方法一：定时器1s内触发一次事件

function throttle(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}
function handle(){
    console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));

方法二：时间差大于规定的时间间隔 则 执行事件，并重新赋值最新的时间

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));

二、防抖（有人上车则重新计时）

function debounce ( fn , wait ) {

var timeout = null ; // 定义一个定时器

return function () {

if (timeout !== null ) clearTimeout(timeout); // 清除这个定时器

timeout = setTimeout(fn, wait);

}

}

// 处理函数

function handle () {

console. log (Math. random ());

}

// 滚动事件

window. addEventListener ( 'scroll' , debounce(handle, 1000 ));

---

例如：输入框防抖

let timeout= null;

 function oninput() {

            if(timeout !== null) clearTimeout(timeout); 

            timeout = setTimeout(function(){console.log('输入了');

            }, 500);    

         }