JS防抖节流

JS防抖和节流

    在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果

函数防抖

    当持续触发事件时，一定时间段内没有触发事件，才会执行一次事件触发函数，如果设定的时间来到之前，又出发了一次事件，就重新开始延时

如下图，持续触发scroll事件，不会触发事件函数，只有当一定时间段内没有触发事件，才会执行一次事件触发函数。

var timer;    //undefined

window.onscroll = function(){

    //如果当前timer不是空，说明前面有一个等待的请求还未发送，就停止前面的等待

    if(timer !== undefined){}

        clearTimeout(timer);

};

//再重新开始下一轮等待

timer = setTimerout(function(){

    //当200ms内，未发生滚动时，才发送正式的ajax请求

    console.log("发送ajax请求，加载更多数据...")

},200);

函数节流

    当持续触发事件时，保证一段时间内只执行一次触发函数

    加载更多