Question

我已经构建了一个jQuery插件，可以检测窗口调整大小，将两种div颜色从红色变为蓝色。然后它使用一个计时器事件来检测窗口何时完成调整大小并将颜色从蓝色变回红色。

问题是两个div中只有一个会变回红色。我认为这可能是由于共享相同的计时器变量。

如何确定定时器事件的范围，使其对每个实例都是唯一的？

!function($){
$.fn.resizeD = function() {
    return this.each(function(){
        var $this = $(this);
 $(window).resize(function() {              
     $this.css("background","blue");

     var existingResizeTimeout = $(this).data("resize_timer");

     if(existingResizeTimeout){
         clearTimeout(existingResizeTimeout);
     }

     $.data(this, 'resize_timer', setTimeout(function() {

         $this.css("background","red");

     }, 500));
});
});
}
}(window.jQuery);

$(document).ready(function(){
$(".test").resizeD();
});

Answer 1

更改

$.data(this, 'resize_timer', setTimeout(function() {
     $this.css("background","red");
}, 500));

到

$.data($this, 'resize_timer', setTimeout(function() {
     $this.css("background","red");
}, 500));

小提琴：http://jsfiddle.net/hqN2k/10/

每个实例上的jQuery插件唯一计时器

1 个答案: