Have a script fire after another script?

Question

I am using two scripts that fire at the same time. They seem to cause a conflict. The question I have is how can I get one to fire a half a second to a second after the other fires? I think that might solve the issue I am having.

I am using jQuery but I am unsure how to go about this.

Thanks

Note I did not post the scripts here a they are irreverent. I just need to know how to delay one from firing until the other has. Also the one I want to fire last is at the bottom of the HTML the other is in the head. Also the two scripts are completely unrelated to each other in what they do.

EDIT This question stems from another question i posted. Here - Javascript/Fancybox Error? - I thought about it and would like to try to add a delay but I am also curious as how to add the delay anyway that is not related to the issue I am having.

Answer 1

If you want fancybox to run first, use the fancybox onComplete callback:

$j(document).ready(function(){
    $j('#start').fancybox({

        'onComplete': function () {
            Engine.Initialize();
        }

    });
});

otherwise, put the fancybox code in after calling your custom init function:

$j(document).ready(function(){
    Engine.Initialize();

    $j("#start").fancybox({
        'padding' : 0
    });
});

Answer 2

Two scripts cannot fire at the same time. Javascript is single threaded and no two scripts ever run at the same time. One will run to completion, then the next one will run. If there is a conflict between the two, then it has to do with how the scripts are written and we could only help you solve that problem by seeing the scripts and the context that causes them to run.

Also, it may be relevant that anything you attempt to run in the head tag when the script is loaded cannot manipulate the browser DOM because it is not in place yet. It would have to be delayed until the DOM is successfully loaded and ready for manipulation.

It is easy to have one javascript function call another javascript function:

function doStuff1() {
    // do doStuff1 stuff
    doStuff2();
}

function doStuff2() {
    // do doStuff2 stuff
}

doStuff1();   // call doStuff1 which will also call doStuff2

You've now added one more part of your question. You ask how to implement a delay. You can use a timer to run some code at some time in the future:

setTimeout(doStuff2, 5000);    // run doStuff2() in 5 seconds