Is it possible to store setTimeout function inside a localstorage?

问题

Provided that I have the javascript code below.

var timeout = setTimeout(function(){
                alert('this is executed after 5 seconds');
              }, 5000);

localStorage.setItem('timeout_event', timeout);

I have checked the return value of the setTimeout function to be an id or something. If the user refreshes the page, how do I re-run the timeout event? Is it even possible?

Any help will do. Thank you in advance.

回答1:

I have checked the return value of the setTimeout function to be an id or something.

Yes, it is a numeric id which you can pass to clearTimeout for cancelling a scheduled function run.

If the user refreshes the page, how do I re-run the timeout event?

Yes, when the page is unloaded all outstanding timeouts are aborted, so you'll need to restart the timeout on the new page.

Is it even possible?

Yes and no. You won't be able to run the function which you scheduled from the last page - all its context/scope would be lost - you need to create a new one, in the context of the new page.

But if you want to execute certain functionalities based on a timeout/interval across pages, you can do so by using DOM storage or similar. You would store the timestamp of the designated function run, and a flag whether it has already run. That way, you can check on following pages whether and when you need to re-schedule the function.

回答2:

If you want your timeout function to be executed whenever the page is refreshed , you just add the function in window.onload

var timeout = setTimeout(function(){
                alert('this is executed after 5 seconds');
              }, 5000);

window.onload = timeout;

This works fine for me

If you want it to be executed for multiple times , then go for setInterval()

var timeout = setInterval(function(){
                alert('this is executed for each second');
              }, 1000);

window.onload = timeout;

It will be executed until you call clearInterval(timeout);

If you want multiple timeouts then you should do something like this

var timeout = setTimeout(function(){
                alert('this is executed after 1 second');
              }, 1000);

var timeout1 = setTimeout(function(){
                alert('this is executed after 2 seconds');
              }, 2000);

var timeout2 = setTimeout(function(){
                alert('this is executed after 3 seconds');
              }, 3000);
window.onload = timeout;timeout1;timeout2;

This is because setTimeout calculates the time as soon as the page is refreshed and this works fine for me

回答3:

Thanks for the help guys.

I managed to find a way to solve the problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title>Testing</title>
    <script type="text/javascript">
        var timeout_time = 10;
        var time_remaining = 0;

        if(localStorage.getItem('timeout_time')==null){
            run_timeout(timeout_time);
        }
        else{
            run_timeout(localStorage.getItem('timeout_time'))
        }

        setInterval(function(){
            time_remaining = localStorage.getItem('timeout_time');

            if(time_remaining > 1 || time_remaining != null){
                localStorage.setItem('timeout_time', time_remaining - 1);
            }
        }, 1000);

        function run_timeout(time){
            setTimeout(function(){
                alert('executed on 10 seconds');
                localStorage.removeItem('timeout_time');
            }, time * 1000);
            localStorage.setItem('timeout_time', time);
        }


    </script>
</head>
<body>
    This is the test page.
</body>
</html>

I hope this can be useful for others.

Again, thank you all.

来源：https://stackoverflow.com/questions/16184027/is-it-possible-to-store-settimeout-function-inside-a-localstorage

标签

javascript

jquery

local-storage

settimeout