防抖和节流方法实现

防抖和节流记录

防抖简介

  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)
        }
    }
}
posted @ 2018-04-11 10:51 叫我MrGuang 阅读(...) 评论(...) 编辑 收藏