防抖和节流方法实现

防抖和节流记录

防抖简介

1. resize和scroll等事件操作的时候，会非常频繁的触发导致页面不断的重新渲染，非常影响性能，加重浏览器负担，导致用户体验不好，防抖函数就是当事件持续触发事件时，debounce函数会把事件合并且不会触发回调，当停止触发事件delay时长的时候才会触发事件。

 function debounce(fn, delay, immediate) {
    // fn是回调函数，delay是延迟时间，immediate是否先执行一次再节流
    var timer = null,
        _this, args
    return function() {
        //
        _this = this
        args = arguments
        // 如果有定时器先清除，让定时器的函数不执行
        timer && clearTimeout(timer)
        if (immediate) {
            // 没有定时器的话，告诉后面的函数可以先执行一次，首次进入函数没有定义定时器，do为true
            var do = !timer
            // 然后在delay时间以后将timer设置为null，首次执行之后，只有在timer为null之后才会再次执行
            timer = setTimeout(function() {
                timer = null
            }, delay)
            if (do) {
                fn.apply(_this, args)
            }
        } else {
            // 如果没设置第三个参数，就是什么时候停止，之后delay时间才执行
            timer = setTimeout(function() {
                fn.apply(_this, args)
            }, delay)
        }

    }
}

节流简介

1. 节流也是解决类似的问题，节流只允许回调函数在规定时间内只执行一次，和防抖的最大区别是，无论多频繁的触发事件，都会保证在规定时间内执行一次回调

 function throttle(fn, delay) {
    var before = Date.now()
    return function() {
        var _this = this,
            args = arguments
        var now = Date.now()
        if (now - before - delay >= 0) {
            before = now
            setTimeout(function() {
                fn.apply(_this, args)
            }, delay)
        }
    }
}