2

I have made a CSS3 ajax loader using this code. id is the location of the ajaxloader. This code works fine and the loader functions properly, however if the function is called twice, the Timeout's will cancel each other out because the timeout is assigned to a variable. Somehow, I want to make sure that this will never happen. Here is the javascript I am using

function ajaxloader(id) {
    var i = $("#" + id + " .ajaxpieces").length;
    var s = $("#" + id + " .ajaxpieces").filter(function() {
        return ($(this).css('background-color') == "rgb(0, 128, 0)");
    }).next();

    if (s.length < 1) {
        s = $("#" + id + " .ajaxpieces").first();
    }
    s.css('backgroundColor','green').siblings().css('backgroundColor','grey');
    ajax_ii = setTimeout(function(){ajaxloader(id);},550);
}

function killloader() {
    clearTimeout(ajax_ii);
}
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
ben
  • 653
  • 2
  • 7
  • 16
  • 4
    I think `window['ajax_' + timestamp] = setTimeout(...);` will work – jonhopkins Oct 28 '13 at 14:02
  • Take a look at http://api.jquery.com/jQuery.data/. It enables you to attach anything to an HTML element. In this case you can attach the result of `setTimeout` to `$('#' + id)` – Lasse Espeholt Oct 28 '13 at 14:04
  • While jonhopkins' comment and Vicky's answer are direct answers to your question, I think you would help yourself more by explaining what you want this timer to do. I notice that when it's called once, you immediately invoke it again, which makes me wonder: why `setTimeout` instead of `setInterval`? Also, if you're going to have it continually run, why is the variable name an issue? You have multiple entrypoints, so that it will run more than every 550 ms? Even if you're running it on different `id`s, it's much more efficient to run it once on all ids instead of have multiple loops. – Scott Mermelstein Oct 28 '13 at 14:09
  • 1
    @ScottMermelstein - I agree with most of what you're saying there, but I would like to point out that there are very good reasons for using a self-triggering `setTimeout` rather than a `setInterval`. `setInterval` can have some major issues if you have any blocking actions on the page, which can cause the interval triggers to build up, and then all fire at once when the block is released. This is a really bad thing, especially when the event is being used for an ajax loader. `setTimeout` is much better for this sort of thing. – Spudley Oct 28 '13 at 14:19
  • @ben - I would suggest reading the answers to [this question](http://stackoverflow.com/questions/315078/how-do-you-handle-multiple-instances-of-settimeout). They probably achieve what you need to do in a much better way than how you're asking for it. – Spudley Oct 28 '13 at 14:31

1 Answers1

5

Since every variable are object of window, you can do it this way:

            window['a_time'+new Date().getTime()] = setTimeout(function(){
                ajaxloader(id);
            },550);
Vicky Gonsalves
  • 11,593
  • 2
  • 37
  • 58