Выделите границы изображения с помощью запроса Ajax

Question

Во-первых, некоторая визуализация кода.У меня есть следующие изображения, которые динамически сгенерированы из jquery.Они сделаны по запросу пользователя:

<img id="i13133" src="someimage.jpg" />
<img id="i13232" src="someimage1.jpg" />
<img id="i14432" src="someimage2.jpg" />
<img id="i16432" src="someimage3.jpg" />
<img id="i18422" src="someimage4.jpg" />

У меня есть цикл AJAX, который повторяется каждые 15 секунд с использованием jQuery, и он содержит следующий код:

Примечание: Оператор ifнаходится внутри цикла Ajax.

Где imgId - запрошенный идентификатор вызова Ajax.

//Passes the IDs retrieved from Ajax, if the IDs exist on the page the animation is triggered.
if ( $('#i' + imgId ).length )
{

var pickimage = '#i' + imgId;

var stop = false;

function highlight(pickimage) {
   $(pickimage).animate({color: "yellow"}, 1000, function () {
      $(pickimage ).animate({color: "black"}, 1000, function () {
         if (!stop) highlight(pickimage);
      });
   });
}

// Start the loop
highlight(pickimage);

}

Отлично работает, даже с несколькими изображениями.Но я изначально использовал это с одним изображением.

Проблема в том, что мне нужно прерывание.Примерно так:

$(img).click(function () {
   stop = true;
});

Есть две проблемы:

1.) Это очевидно останавливает все анимации.Я не могу понять, как написать что-то, что останавливает анимацию только по нажатому изображению.

2.) Ajax извлекает идентификаторы, иногда эти идентификаторы появляются чаще, чем раз в несколько минут, чтоозначает, что это будет повторять анимации друг на друге, если изображение существует.Я мог бы использовать некоторую помощь, чтобы выяснить, как определить, запущена ли уже анимация на изображении, и ничего не делать, если анимация уже запущена на изображении.

Answer 1

Вы можете поразить двух зайцев одним выстрелом;)

1) Не используйте переменную stop.Добавьте класс к каждому img:

// Instead of: var stop = false;
$(pickimage).addClass("animating");

// Instead of: if (!stop) highlight(pickimage);
if ($(pickimage).hasClass("animating")) highlight(pickimage);

// Instead of: $(img).click(function () { stop = true; });
$(img).click(function () { $(this).removeClass("animating"); });

2) То же самое, проверьте класс!

if ($(pickimage).hasClass("animating")) return;