jQuery事件编写进阶(2)_H5之家 - 中国HTML5教程资源分享第一站

$(document).ready(function() {

var timer = 0;

$window.scroll(function() {

if (!timer) {

timer = setTimeout(function() {

checkScrollPosition();

timer = 0;

}, 250);

}

}).scroll();

});

复制代码

　　这里给窗体滚动事件添加处理函数，这个处理函数在窗体滚动时每次延迟250毫秒执行。如果不加延迟，浏览器哪怕滚动一个像素，都会触发checkScrollPosition()函数的调用，浏览器反复调用checkScrollPosition()函数，可能会引起性能方面的问题而导致浏览器进入“假死状态”，常见的窗体类似事件有scroll, resize, 和 mousemove，给这些窗体事件添加处理函数，希望都能添加延迟代码，使事件延迟执行，减少函数调用次数，从而提升用户体验，给用户比较平滑的浏览器效果体验。通过jQuery的特殊事件和自定义事件的结合，我们能够优化上面的事件延迟代码，从而移除事件注册中的setTimeout()函数，类似于java中的切面编程。这样事件绑定中只要直接调用checkScrollPosition()方法，不再需要在外面再包装setTimeout函数。请看以下示例：

(function($) {

$.event.special.throttledScroll = {

setup: function(data) {

var timer = 0;

$(this).bind('scroll.throttledScroll', function(event) {

if (!timer) {

timer = setTimeout(function() {

$(this).triggerHandler('throttledScroll');

timer = 0;

}, 250);

}

});

teardown: function() {

$(this).unbind('scroll.throttledScroll');

}

};

})(jQuery);

$(document).ready(function() {

$window.bind('throttledScroll', checkScrollPosition).trigger('throttledScroll');

});

复制代码

　　这样最大程度的简化了事件绑定的代码，并且给了我们一个良好的可复用的事件延迟机制。因为除了窗体可以绑定throttledScroll事件，页面中有滚动条的其他div元素也可以绑定throttledScroll事件，而事件延迟写在$.event.special.throttledScroll的setup函数里面，这样DOM只选要关心具体事件处理函数的实现，不需要再手动添加延迟代码来改善性能。这样编写代码，结构良好，代码更清晰易懂，复用性也高。