函数节流与防抖-优快云博客

本文介绍了如何使用jQuery实现函数的节流(throttle)与防抖(debounce)，这两种技术可以有效减少事件处理函数的过度调用，提升用户体验及性能。通过具体示例展示了如何为点击、滚动和输入事件应用这些技术。

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

function 工具集

经常会碰到这样的问题
1. button.click 后，只调用一次方法
2. window.scroll触发太频繁，导致滚动加载次数太多
3. document.keyup次数太多，导致智能提示调用次数太多

你需要以下的方法来解决此类问题



$('a.load').on('click', $.once(function() {
     $('#tabs .first').load(url);
}));

$(window).on('scroll', $.throttle(function() {
     $('#rest').lazyload();    
}));

$(input).on('keyup', $.debounce(function() {
     $.suggest($(this).val())
}));

工具集源码如下：


$.bind = function(func, context) {
      var args = Array.prototype.slice.call(arguments, 2);
      return function() {
          return  func.apply(context, args);
      }
}

//只调用一次
$.once = function(func){
        var ran = false;
	return function() {
		if(ran) return;
		ran = true;
		func();
	}
}

//ms时间内只执行一次
$.throttle = function(func, ms) {
   ms = ms || 150;

   var last = +new Date();
   var timer ;
    return function() {
        var now = +new Date();
        if(now - last > ms) {
             timer = null;
             last = now;
             func();
        } else {
             timer = setTimeout(func, ms - (now-last));
        }
    }
}

//缓冲ms时间后才执行
$.debounce = function(func, ms) {
       ms = ms || 150;

       var timer;
       return function() {
           clearTimeout(timer);
           timer = setTimeout(func, ms);
      }
}