Question

I have a function that calls jQuery’s pulse function. I use it on a small graphic in the client interface that indicates that some data is in the process of being synchronized with the server. While the data is being transferred, the pulse function takes effect, making the graphic look like a flickering light.

Alongside that little indicator graphic, is some text. So, when the synchronization is complete, the pulse is stopped, the graphic turns green, and the text says “data synced”.

All well and good, except that for reasons I don’t understand, the function to stop the pulse effect works only about 50% of the time. However, the text that gets changed to say “data synced” works 100% of the time.

How is it that I can get to the point in the code where both actions are executed, and yet only one actually happens? It seems to me they should either both work or both fail. (I have tried changing their order, but that does not have any effect on the problem.)

Here is the code in question. The first function executes when data begins synchronizing, the other executes when the server sends back a JSON saying “all good: data synchronized”.

Also note, I’m kind of a noob, so please dumb down answers to my level.

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

Okay, solved it for sure this time.

Turns out the problem was not in the stop() method, but with how the pulse is started. I’ll try and explain this so it makes sense, and hopefully is helpful for others with similar issues.

My mistake was assuming that when one started a pulse animation on a named element (in my case the #indicator div), then that pulse effect was simply “on”, and could be simply switched off. I assumed it was binary, kind of like how a button element can be either enabled or disabled, and trying to disable it a second time wouldn’t do anything.

However, the reality is that the pulse effect is cumulative. In other words, if you call the pulse effect on the same element, it will add another pulse on top of the existing one.

In my interface, I have a few different widgets that can turn on the indicator pulse effect. What I did not realize was happening was that under certain circumstances they were each adding a new pulse effect on top of any running ones.

So when the stop() method was called, it probably was stopping one of running pulse effects, but others kept running, making it look as though the pulse effect was simply continuing. (It might be helpful if there was code to say “stop ALL running animations…)

I simply added a variable storing a value that would say whether or not there was already a pulse effect going. If there was, then don’t start a new one. That way, I ensure there is only one pulse effect going at any one time, and the stop() method can kill it.

Thank you to everyone for their helpful explanations, and for taking the time to write example code that enlighted me on what I should be expecting.