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));

Fiddle：http://jsfiddle.net/hqN2k/10/