码迷,mamicode.com
首页 > 其他好文 > 详细

节流和防抖的实现

时间:2018-10-16 13:35:41      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:滚动   缺陷   new   设定   turn   rev   div   resize   time   

 
1 防抖
+ 定义:合并事件且不会去触发事件,当一定时间内没有触发这个事件时,才真正去触发事件
+ 原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清楚上一次的延时操作定时器,重新定时
+ 场景:keydown事件上验证用户名,输入法的联想
+ 实现:

 

 
function debounce(fn, delay) {
    var timer;
    return function() {
        var that = this;
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(that, args);
        }, delay);
    }
}    

 

2 节流
+ 定义:持续触发事件时,合并一定时间内的事件,在间隔一定事件之后再真正触发事件。每间隔一段事件触发一次
+ 场景:resize改变布局时,onscroll滚动添加加载下面的图片时。
+ 实现:
1. 使用时间戳
> + 原理:当触发事件的时候,我们取出当前的时间戳,然后减去之前的时间戳(最一开始值设为0),如果大于设置的时间周期,就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行。
> + 缺陷:第一次事件会立即执行,停止触发后没办法再激活事件。
function throttle(fn, interval) {
    var previousTime = +new Date()


    return function () {
        var that = this
        var args = arguments
        var now = +new Date()
        if (now - previousTime >= interval) {
            previousTime = now
            fn.apply(that, args)
        }
    }
}                
1. 使用定时器
>+ 原理:当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行,直到定时器执行,然后执行函数,清空定时器,这样就可以设置下个定时器。
>+ 缺陷:第一次事件会在n秒后执行,停止触发后依然会再执行一次事件。
function throttle(fn, interval) {
    var previousTime = +new Date()


    return function () {
        var that = this
        var args = arguments
        var now = +new Date()
        if (now - previousTime >= interval) {
            previousTime = now
            fn.apply(that, args)
        }
    }
}

 

1. 优化
> + 鼠标移入能立刻执行,停止触发的时候还能再执行一次
function throttle(fn, interval) {
    var previousTime = +new Date()


    return function () {
        var that = this
        var args = arguments
        var now = +new Date()
        if (now - previousTime >= interval) {
        previousTime = now
        fn.apply(that, args)
        }
    }
}

原文地址: 节流和防抖的实现

 

节流和防抖的实现

标签:滚动   缺陷   new   设定   turn   rev   div   resize   time   

原文地址:https://www.cnblogs.com/chengbo-x/p/9796931.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!