javascript节流函数throttle和debounce

最新推荐文章于 2025-03-15 15:47:09 发布

Drifterkiten

最新推荐文章于 2025-03-15 15:47:09 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Drifterkiten/article/details/88391111

本文深入探讨了JavaScript中常见的节流(throttle)与防抖(debounce)技术，这两种技术常用于优化事件监听器，如窗口调整大小和滚动事件，通过限制函数调用频率来提高网页性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

throttle

function throttle(method, context) {
 clearTimeout(method.tId);
 method.tId= setTimeout(function(){
 method.call(context);
 }, 100);
} 

window.onresize=throttle(func,1000)
window.onscroll=throttle(func,1000)

debounce

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