函数的节流与防抖

    当进行窗口的resize操作,scroll操作,输入框内容校验的时候,如果对这些时间触发的回调的处理逻辑不加以限制,就会导致频繁的请求,频繁的页面渲染,这会比较影响用户体验.此时我们可以用debounce()和throttle()的方式来减少回调被处罚的频率,这样既可以达到我们想要的效果又可以减弱对用户体验的影响.

函数防抖

概念: 防抖指的是在事件被触发某个时间间隔(如: 500ms)后再执行相应的回调,如果在这个时间间隔内又被触发,则重新计时.

举例: 如果有人进电梯(触发事件),那么电梯将在10秒后出发(执行事件回调),如果这10秒期间又有人进电梯了(在此期间再次触发回调),则我们又要重新开始计时,电梯又要再等十秒才会被触发.

代码示例:

var debounce = function(cb, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if(timer !== null) {  // 在delay间隔内又被触发,则清空定时器,重新计时
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            cb.apply(context , args);
        }, delay);
    }
}
// 回调处理逻辑
function handle() {
    console.log(Math.random());
}

使用示例:

// 监听输入框的输入事件
document.getElementById("#input").addEventListener("keyup", debounce(handle, 200));

函数节流

概念: 函数节流指的是让原先频繁触发的函数回调在间隔某一段时间执行一次.

举例: 我在输入内容的时候,会频繁触发change事件,给后台发送请求,我们为了节流,可以考虑间隔一个时间间隔(如: 500ms)之后再向后台发送请求.

代码实例:

var throttle= function(cb, delay) {
    var start= 0;
    return function() {
        var current = new Date();
        var context = this;
        var args = arguments;
        if(current  - start >= delay) {
           cb.apply(context, args);
           start = new Date();                
        }         
    }
} 
// 回调处理逻辑
function handle() {
    console.log(Math.random());
}

使用示例:

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

使用场景

频繁触发视图更新的操作的时候我们需要采用防抖措施,防止视图因为频繁更新而发生抖动.

举例: 用户输入事件, 窗口大小调整事件,拖拽事件等

频繁触发请求或者各种耗费性能的逻辑处理的时候我们需要采用节流措施,以减少性能损耗.

举例: scroll滚动事件,拖拽事件等

这里只是我浅显的想法,具体的场景下采用哪种策略,还是要看你的业务需求.

很少写博客,没什么经验,写的不好的地方还望各位指出,有更优的想法和方案欢迎指导,一起学习,一起进步~~