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

Question

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

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

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

http://jsfiddle.net/hqN2k/9/

!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/