Почему одно действие Javascript выполняется, а другое нет?

Question

У меня есть функция, которая вызывает импульсную функцию jQuery. Я использую его на небольшом графике в интерфейсе клиента, который указывает, что некоторые данные находятся в процессе синхронизации с сервером. Во время передачи данных действует импульсная функция, которая делает изображение похожим на мерцающий свет.

Наряду с этим небольшим графическим индикатором есть текст. Таким образом, когда синхронизация завершена, импульс останавливается, изображение становится зеленым, а текст говорит «данные синхронизированы».

Все хорошо, за исключением того, что по причинам, которые я не понимаю, функция прекращения действия импульса работает только в 50% случаев. Тем не менее, текст, который изменяется, чтобы сказать «синхронизация данных» работает 100% времени.

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

Вот код, о котором идет речь. Первая функция выполняется, когда данные начинают синхронизироваться, другая - когда сервер отправляет обратно JSON со словами «все хорошо: данные синхронизированы».

Также обратите внимание, я вроде как новичок, поэтому, пожалуйста, придумайте ответы на мой уровень.

function syncDataStart()
{
    $(document.getElementById("indicator")).pulse(
    {
        backgroundColor: ["yellow", "orange"]
    }, 100, 9999, "linear");
    document.getElementById("indicator-text").innerHTML = "synchronizing data";
}

function syncDataComplete()
{
    document.getElementById("indicator-text").innerHTML = "data synced";
    $(document.getElementById("indicator")).stop();
    document.getElementById("indicator").style.backgroundColor = "green";
}

Answer 1

Ладно, на этот раз решил точно.

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

Моя ошибка заключалась в том, что когда запускалась импульсная анимация на именованном элементе (в моем случае #indicatordiv), тогда этот импульсный эффект был просто «включен», и его можно было просто отключить.Я предположил, что это был двоичный файл, вроде как элемент кнопки можно включить или отключить, и попытка отключить его во второй раз ничего не даст.

Однако реальность такова, что импульсный эффектнакопительный.Другими словами, если вы вызовете импульсный эффект для того же элемента, он добавит еще один импульс поверх существующего.

В моем интерфейсе у меня есть несколько разных виджетов, которые могут включать индикатор импульса.эффект.Что я не осознавал, так это то, что при определенных обстоятельствах каждый из них добавлял новый импульсный эффект поверх любых запущенных.

Поэтому, когда вызывался метод stop (), он, вероятно, останавливал один из запущенныхимпульсные эффекты, но другие продолжали работать, создавая впечатление, что импульсный эффект просто продолжается.(Возможно, было бы полезно, если бы был код, говорящий «остановить ВСЕ запущенные анимации ...»)

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

Спасибо всем за ихполезные объяснения и то, что вы нашли время написать пример кода, который научил меня тому, чего я должен ожидать.

Answer 2

Ваш предоставленный код работает с плагином James Padolsey's Pulse и плагином John Resig's Color на моей тестовой странице .

Код, который вы дали, также отлично работает как с document.getElementByID («индикатор»), так и с «#indicator». Мне кажется странным, что он ломается на вашей странице при использовании хешей. Я бы искал ошибку в других частях кода:

• Есть ли еще доступ к элементу индикатора?
• Какие плагины вы используете? Вы написали что-нибудь себе, что может иметь отношение?
• Что-то необычное мешает / нарушает навигацию DOM в JQuery?

Удачи.

Answer 3

Изменить:

попробуйте использовать .stop(true,true) как

$(document.getElementById("indicator")).stop(true,true); OR

$("#indicator").stop(true,true);