Have a script fire after another script?

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.

---

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
    });
});

---

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

---

jfriend00's post is correct, but the following does exactly what you are asking for:

// Ensure that all scripts have been loaded.
$(document).ready(function(){

    // Call first script.
    doFistThing();

    // Set a 1 second delay that starts AFTER the first script has completed.
    setTimeout(function(){

        doSecondThing();

    }, 1000);


});

---

I am not sure how totally unrelated scripts can affect each other, may be these un related scripts are affecting global properties which they use and hence go bonkers. There is a concept in JS that let you run two JS scripts in parallel, this is known as web workers. John Resig, the jquery guy, have published an article long ago and I found it using Google. http://ejohn.org/blog/web-workers/. Using web worker you can start your 2nd script after one second or any time. I am not a JS ninja but I think it may help you. But still, w/out you posting your code it is hard for others to suggest you something. After looking at your edit, I can suggest you to explore settimeout in JS. Another link from same article http://ejohn.org/blog/how-javascript-timers-work/