OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to pause setTimeout when leaving the window with Javascript?

  • Thread starter Thread starter Radical_Activity
  • Start date Start date
R

Radical_Activity

Guest
I have a few setTimeout functions in my project each with a setInterval.

From what I've experienced setInterval stops when I'm leaving the window, however, setTimeout does not stop counting the seconds.

Is it possible to pause the timer of the setTimeout when someone leaves the current window (switches over to another) and continue it when he returns? If yes, how?

Here's the code I've managed to create that represents my problem:


Code:
// find elements
var banner = $("#banner-message")
var banner2 = $("#banner-message2")
var banner3 = $("#banner-message3")
var num = 0;
var num2 = 0;
var num3 = 0;

var i1 = setInterval(function() {
	num++;
  $(banner).text(num);
  if (num >= 100)
  {
  	clearInterval(i1);
  }
}, 50);

setTimeout(function()
{
	var i2 = setInterval(function() {
    num2++;
    $(banner2).text(num2);
    if (num2 >= 100)
    {
      clearInterval(i2);
    }
  }, 50);
}, 5500);

setTimeout(function()
{
	var i3 = setInterval(function() {
    num3++;
    $(banner3).text(num3);
    if (num3 >= 100)
    {
      clearInterval(i3);
    }
  }, 50);
}, 11000);

Code:
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}


#banner-message2 {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}


#banner-message3 {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  0
</div>

<div id="banner-message2">
  0
</div>

<div id="banner-message3">
  0
</div>

<p>I have a few setTimeout functions in my project each with a setInterval. </p>

<p>From what I've experienced setInterval stops when I'm leaving the window, however, setTimeout does not stop counting the seconds.</p>

<p>Is it possible to pause the timer of the setTimeout when someone leaves the current window (switches over to another) and continue it when he returns? If yes, how?</p>

<p>Here's the code I've managed to create that represents my problem:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// find elements
var banner = $("#banner-message")
var banner2 = $("#banner-message2")
var banner3 = $("#banner-message3")
var num = 0;
var num2 = 0;
var num3 = 0;

var i1 = setInterval(function() {
num++;
$(banner).text(num);
if (num >= 100)
{
clearInterval(i1);
}
}, 50);

setTimeout(function()
{
var i2 = setInterval(function() {
num2++;
$(banner2).text(num2);
if (num2 >= 100)
{
clearInterval(i2);
}
}, 50);
}, 5500);

setTimeout(function()
{
var i3 = setInterval(function() {
num3++;
$(banner3).text(num3);
if (num3 >= 100)
{
clearInterval(i3);
}
}, 50);
}, 11000);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}

#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}


#banner-message2 {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}


#banner-message3 {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}

button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}

#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}

#banner-message.alt button {
background: #fff;
color: #000;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
0
</div>

<div id="banner-message2">
0
</div>

<div id="banner-message3">
0
</div></code></pre>
</div>
</div>
</p>
 

Latest posts

B
Replies
0
Views
1
Blundering Ecologist
B
Top