防抖和节流方法实现

防抖和节流记录

防抖简介

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