Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement a "function timeout" in Javascript - not just the 'setTimeout'

How to implement a timeout in Javascript, not the window.timeout but something like session timeout or socket timeout - basically - a "function timeout"

A specified period of time that will be allowed to elapse in a system before a specified event is to take place, unless another specified event occurs first; in either case, the period is terminated when either event takes place.

Specifically, I want a javascript observing timer that will observe the execution time of a function and if reached or going more than a specified time then the observing timer will stop/notify the executing function.

Any help is greatly appreciated! Thanks a lot.

like image 838
sransara Avatar asked Jan 08 '12 15:01

sransara


People also ask

What is the alternative for setTimeout in JavaScript?

The setInterval method has the same syntax as setTimeout : let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...) All arguments have the same meaning. But unlike setTimeout it runs the function not only once, but regularly after the given interval of time.

How do you implement timeout in JavaScript?

The setTimeout() method executes a block of code after the specified time. The method executes the code only once. The commonly used syntax of JavaScript setTimeout is: setTimeout(function, milliseconds);

How do you delay a function in JavaScript?

To delay a function call, use setTimeout() function. functionname − The function name for the function to be executed. milliseconds − The number of milliseconds. arg1, arg2, arg3 − These are the arguments passed to the function.

What is difference between timeout and setTimeout?

Angular $timeout is a wrapper written for window. setTimeout in form of a try catch block which throws exceptions via $exceptionHandler service. $timeout accepts the function to be delayed, delay time, a boolean to invoke $. apply and parameters to be passed to the function.


3 Answers

I'm not entirely clear what you're asking, but I think that Javascript does not work the way you want so it cannot be done. For example, it cannot be done that a regular function call lasts either until the operation completes or a certain amount of time whichever comes first. That can be implemented outside of javascript and exposed through javascript (as is done with synchronous ajax calls), but can't be done in pure javascript with regular functions.

Unlike other languages, Javascript is single threaded so that while a function is executing a timer will never execute (except for web workers, but they are very, very limited in what they can do). The timer can only execute when the function finishes executing. Thus, you can't even share a progress variable between a synchronous function and a timer so there's no way for a timer to "check on" the progress of a function.

If your code was completely stand-alone (didn't access any of your global variables, didn't call your other functions and didn't access the DOM in anyway), then you could run it in a web-worker (available in newer browsers only) and use a timer in the main thread. When the web-worker code completes, it sends a message to the main thread with it's results. When the main thread receives that message, it stops the timer. If the timer fires before receiving the results, it can kill the web-worker. But, your code would have to live with the restrictions of web-workers.

Soemthing can also be done with asynchronous operations (because they work better with Javascript's single-threaded-ness) like this:

  1. Start an asynchronous operation like an ajax call or the loading of an image.
  2. Start a timer using setTimeout() for your timeout time.
  3. If the timer fires before your asynchronous operation completes, then stop the asynchronous operation (using the APIs to cancel it).
  4. If the asynchronous operation completes before the timer fires, then cancel the timer with clearTimeout() and proceed.

For example, here's how to put a timeout on the loading of an image:

function loadImage(url, maxTime, data, fnSuccess, fnFail) {
    var img = new Image();

    var timer = setTimeout(function() {
        timer = null;
        fnFail(data, url);
    }, maxTime);

    img.onLoad = function() {
        if (timer) {
            clearTimeout(timer);
            fnSuccess(data, img);
        }
    }

    img.onAbort = img.onError = function() {
        clearTimeout(timer);
        fnFail(data, url);
    }
    img.src = url;
}
like image 147
jfriend00 Avatar answered Sep 21 '22 12:09

jfriend00


You could execute the code in a web worker. Then you are still able to handle timeout events while the code is running. As soon as the web worker finishes its job you can cancel the timeout. And as soon as the timeout happens you can terminate the web worker.

execWithTimeout(function() {
    if (Math.random() < 0.5) {
        for(;;) {}
    } else {
        return 12;
    }
}, 3000, function(err, result) {
    if (err) {
        console.log('Error: ' + err.message);
    } else {
        console.log('Result: ' + result);
    }
});

function execWithTimeout(code, timeout, callback) {
    var worker = new Worker('data:text/javascript;base64,' + btoa('self.postMessage((' + String(code) + '\n)());'));
    var id = setTimeout(function() {
        worker.terminate();
        callback(new Error('Timeout'));
    }, timeout);
    worker.addEventListener('error', function(e) {
        clearTimeout(id);
        callback(e);
    });
    worker.addEventListener('message', function(e) {
        clearTimeout(id);
        callback(null, e.data);
    });
}
like image 45
Robert Avatar answered Sep 20 '22 12:09

Robert


I realize this is an old question/thread but perhaps this will be helpful to others.

Here's a generic callWithTimeout that you can await:

export function callWithTimeout(func, timeout) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => reject(new Error("timeout")), timeout)
    func().then(
      response => resolve(response),
      err => reject(new Error(err))
    ).finally(() => clearTimeout(timer))
  })
}

Tests/examples:

export function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

const func1 = async () => {
  // test: func completes in time
  await sleep(100)
}

const func2 = async () => {
  // test: func does not complete in time
  await sleep(300)
}

const func3 = async () => {
  // test: func throws exception before timeout
  await sleep(100)
  throw new Error("exception in func")
}

const func4 = async () => {
  // test: func would have thrown exception but timeout occurred first
  await sleep(300)
  throw new Error("exception in func")
}

Call with:

try {
  await callWithTimeout(func, 200)
  console.log("finished in time")
}
catch (err) {
  console.log(err.message)  // can be "timeout" or exception thrown by `func`
}
like image 41
Hans Bouwmeester Avatar answered Sep 20 '22 12:09

Hans Bouwmeester