在Javascript / Java函数中延迟代码执行

Question

I have an onclick javascript function (invoked from DOJO components through .jsp file) within which two UI components are loaded at the same time in js file (through an AJAX call to the Spring Controller (java file) and back to the JSP/Javascript file.)

The problem is that the second component loads before the first component and is not displaying the prescribed data . I would like to know how to set a delay before calling the code in javascript to delay the second component in milliseconds.

Note :

1. I used Thread.sleep(msecs) in my controller which seems to work fine and resolves my issue. But I dont want to use that knowing the risk it poses. So request an alternative instead of this.

2. Also I used setTimeOut() function but setTimeOut() requires a function as an argument. I need to just delay the code within the function for a few milliseconds the first time only. From second time onwards I dont want to delay the code being called.

Request ur valuable inputs.

Answer 1

JavaScript doesn't allow blocking threads, so the only option you can use is setTimeOut() function. Or you can implement mechanism when the first component notifies the second when it loads and at this moment the second component reloads itself.

Answer 2

Maybe your Problem can be solved by using http://dojotoolkit.org/reference-guide/1.8/dojo/domReady.html?highlight=domready to make sure tho dom is entirely loaded

or by using dojo/deffered

http://dojotoolkit.org/reference-guide/1.8/dojo/Deferred.html?highlight=domready

regards

Answer 3

Delaying the execution of code is not a good idea. In development, the calls might be executed and returned in the order you want. But in a production environment with a system under load, the timing of the server calls being executed may not be consistent.

I am assuming that you are using dojo/xhr to make the ajax calls and your solution is to use a DeferredList .

http://dojotoolkit.org/reference-guide/1.9/dojo/DeferredList.html

var d1 = xhr(...);
    d2 = xhr(...);

var dl = new DeferredList([d1, d2]);

dl.then(function(result){
    // Execute the code that requires both calls to be completed.
});