多次触发时运行一次js功能

Question

I have a Div that uses jQuery to load a file/contents with a javascript function..

function DoWork() {
    // Do Stuff
}

Let's say the user can reload the Div and pull the same file/contents with the same js function DoWork(). The problem is, when the file is reloaded, the previous loaded function DoWork() is still running. How can I kill the previous fired DoWork() and restart it?

Answer 1

Javascript is single-threaded, which means only one thing can be executing at a given moment. If DoWork is already "running" it's either a) blocking all other JS code, and you have no choice but to let it finish since you have no way to execute any interruption code until it finishes on its own, or b) DoWork is scheduled to fire off on an interval via setTimeout() or setInterval() .

If it's the latter case, setTimeout() and setInterval() return an ID. Store that ID somewhere and call clearTimeout(doWork_timeout_id) or clearInterval(doWork_interval_id) according to how you started it.

Answer 2

You can build a simple function that use: setTimeout and then each call to DoWork will call first to: clearTimeout. I don't really like this solution because you will waste CPU on setTimeout. So another option will be to use web worker in DoWork (It will do lots of other good things for you in case you are working with big data as it's running in another thread) - then you get an option to send 'stop' message each time you start the work of DoWork().

Answer 3

Are you using ajax to load the div's contents? if so, the better way is as follows:

var doWorkAjax=null;
function DoWork(){
    if (doWorkAjax) doWorkAjax.abort(); 
    doWorkAjax = $.ajax(url, data, function(result){
        ....
        doWorkAjax=null;
    });
}