Плагин jQuery: использование setInterval для периодического обновления массива элементов jQuery

Question

Я пишу плагин jQuery, который вводит новый метод foo(), который создает элемент внутри объекта DOM, на который он вызывается. Я сохраняю указатели на эти изображения в массиве images. В конце метода я вызываю setInterval("someFunction(images)", 1000), который должен периодически выполнять некоторые действия (например, изменять src) на изображениях.

Вот очень короткая версия о том, что мой код выглядит следующим образом:

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

Все работает, если я применяю foo() к одному элементу, но если применить его к нескольким элементам, все периодические обновления применяются к последнему элементу. Я предполагаю, что это потому, что массив передается как ссылка на someFunction и затем перезаписывается.

Я попытался использовать slice() на массиве, чтобы создать копию, но это не сработало, хотя я не понимаю, почему. Я думаю, что я ищу, чтобы каким-то образом сохранить указатели на мои изображения в родительском контейнере.

Любая помощь будет оценена по тому, что мне нужно изменить, чтобы все изображения были обновлены, а не только те, которые были в последнем контейнере.

Answer 1

Как об этом потом:

(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:

Вы также можете попробовать это так, если вы хотите использовать someFunction:

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