jQuery Plugin: Verwenden von setInterval, um ein Array von jQuery-Elementen regelmäßig zu aktualisieren

Question

Ich schreibe ein jQuery-Plugin, das eine neue Methode foo() einführt, die ein Element innerhalb des DOM-Objekts erstellt, das es aufgerufen wird. Ich speichere die Zeiger auf diese Bilder in einem Array images. Am Ende der Methode rufe ich setInterval("someFunction(images)", 1000) an, die regelmäßig einige Aktionen (z. B. Ändern der src) auf den Bildern ausführen sollte.

Hier ist eine sehr kurze Version von dem, was mein Code wie folgt aussieht:

(function($) { 
$.fn.foo = function() { 
return this.each (function() { 
    $box = $("#"+this.id); 

    images = new Array(); 
    for (i = 0; i<4; i++) { 
     images[i] = $("<img>"); 
     $box.prepend(images[i]); 
    } 

    setInterval("someFunction(images)", 1000); 
}); 
} 
function someFunction(images) { 
    for (i = 0; i<images.length; i++) { 
     images[i].attr("src", "foo"+(parseInt(Math.random()*5))); 
    } 
} 
})(jQuery); 

Alles funktioniert, wenn ich foo() auf ein einzelnes Element anwenden, aber wenn ich es auf mehrere Elemente anwenden, werden alle regelmäßigen Aktualisierungen angewendet werden bis zum letzten Element. Ich nehme an, dies liegt daran, dass das Array als Referenz an someFunction übergeben und dann überschrieben wird.

Ich habe versucht, slice() auf dem Array zu verwenden, um eine Kopie zu erstellen, aber das hat nicht funktioniert, obwohl ich nicht verstehe, warum. Ich denke, was ich suche, ist irgendwie die Zeiger zu meinen Bildern innerhalb ihres Elternbehälters zu speichern.

Jede Hilfe würde geschätzt werden, was ich ändern muss, damit alle Bilder aktualisiert werden und nicht nur die im letzten Behälter.

Answer 1

Wie wäre dies dann:

(function ($) { 
    $.fn.foo = function() { 
     return this.each(function() { 
      $box = $(this); // Changed to "this" 

      var images = new Array(); 
      for (i = 0; i < 4; i++) { 
       images[i] = $("<img>"); 
       $box.prepend(images[i]); 
      } 

      // Added the function inline. 
      setInterval(function() { 
       for (i = 0; i < images.length; i++) { 
        images[i].attr("src", "foo" + (parseInt(Math.random() * 5))); 
       } 
      }, 1000); 
     }); 
    }; 
})(jQuery); 

EDIT:

Sie auch es so versuchen könnte, wenn Sie someFunction wiederverwenden möchten:

(function ($) { 
    $.fn.foo = function() { 
     ... 
      setInterval(function() { 
       someFunction(images); 
      }, 1000); 
     ... 
    }; 
})(jQuery); 

function someFunction(images) { 
    for (i = 0; i<images.length; i++) { 
     images[i].attr("src", "foo"+(parseInt(Math.random()*5))); 
    } 
}