首页 > 编程语言 > 详细

javascript函数节流(throttle)与函数去抖(debounce)

时间:2017-05-08 23:02:54      阅读:305      评论:0      收藏:0      [点我收藏+]

throttle 等时间 间隔执行函数。

debounce 时间间隔 t 内若再次触发事件,则重新计时,直到停止时间大于或等于 t 才执行函数。

1、throttle函数的简单实现

function throttle(fn, threshhold, scope) { 
    threshhold || (threshhold = 250); 
    var last, timer; 
    return function () {
        var context = scope || this; 
        var now = +new Date(), 
            args = arguments; 
        if (last && now - last + threshhold < 0) { 
            // hold on to it 
            clearTimeout(deferTimer); 
            timer = setTimeout(function () { 
                last = now; 
                fn.apply(context, args); 
            }, threshhold); 
        } else { 
            last = now; 
            fn.apply(context, args); 
        } 
    };
}

//调用方法
$(‘body‘).on(‘mousemove‘, throttle(function (event) {
    console.log(‘tick‘);
}, 1000));

2、debounce函数的简单实现

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

//调用方法
$(‘input.username‘).keypress(debounce(function (event) {
// do the Ajax request
}, 250));

转自:http://www.cnblogs.com/fsjohnhuang/p/4147810.html

javascript函数节流(throttle)与函数去抖(debounce)

原文:http://www.cnblogs.com/ilovexiaoming/p/6826629.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!