Is there a way to effectively incorporate window.clearInterval() into this javascript code to achieve the desired outcome

Question

Is there a way to effectively incorporate window.clearInterval() into this javascript code to achieve the desired outcome

In my quest to create a pomodoro clock, I decided to experiment with window.setInterval() and its counterpart window.clearInterval before delving into actual coding. However, I've encountered an issue with getting window.clearInterval() to function as desired. Could someone please review my code snippet below and provide guidance on how to resolve this issue? Thank you in advance.

let startTime = 11;
let intervalID;

function countdown() {
  startTime--;
  $('h2').text(startTime);
}

if (startTime > 0) {
  intervalID = setInterval(countdown, 1000);
} else {
  clearInterval(intervalID);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2></h2>

javascript

Answer 1

Answer №1

When examining your code, the condition if (startTime > 0) is only evaluated once. To improve this functionality, consider implementing it in the following manner:

$(document).ready(function() {
    var startTime = 11;
    var intervalID;
    function downCounter() {
        startTime--;
        $('h2').text(startTime);
        if (startTime <= 0){
            clearInterval(intervalID);
        }
    }
    intervalID = setInterval(downCounter, 1000);    
});

Answer 2

When examining your code, the condition if (startTime > 0) is only evaluated once. To improve this functionality, consider implementing it in the following manner:

$(document).ready(function() {
    var startTime = 11;
    var intervalID;
    function downCounter() {
        startTime--;
        $('h2').text(startTime);
        if (startTime <= 0){
            clearInterval(intervalID);
        }
    }
    intervalID = setInterval(downCounter, 1000);    
});

Answer 3

Answer №2

The code inside the `if` statement is as follows:

if (startTime > 0)
  intervalID = setInterval(downCounter, 1000);
else
  clearInterval(intervalID);

In this scenario, the `else` block will never be executed.

This particular segment of code executes only once, before the timer commences, at a point where it is certain that `startTime` has a value greater than zero.

To resolve this issue, check the value of `startTime` within the handler function and clear the interval there if needed:

var startTime = 11;
var intervalID;

function downCounter() {
  startTime--;
  $('h2').text(startTime);
  
  if (startTime <= 0)
    clearInterval(intervalID);
}

intervalID = setInterval(downCounter, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2></h2>

Answer 4

The code inside the `if` statement is as follows:

if (startTime > 0)
  intervalID = setInterval(downCounter, 1000);
else
  clearInterval(intervalID);

In this scenario, the `else` block will never be executed.

This particular segment of code executes only once, before the timer commences, at a point where it is certain that `startTime` has a value greater than zero.

To resolve this issue, check the value of `startTime` within the handler function and clear the interval there if needed:

var startTime = 11;
var intervalID;

function downCounter() {
  startTime--;
  $('h2').text(startTime);
  
  if (startTime <= 0)
    clearInterval(intervalID);
}

intervalID = setInterval(downCounter, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2></h2>

Answer 5

Answer №3

Make sure to include the clearInterval within the downCounter function:

    function downCounter() {
      startTime--;
      $('h2').text(startTime);
      if (startTime <= 0 ) {
        clearInterval(intervalID);
      }    
    }

Answer 6

Make sure to include the clearInterval within the downCounter function:

    function downCounter() {
      startTime--;
      $('h2').text(startTime);
      if (startTime <= 0 ) {
        clearInterval(intervalID);
      }    
    }

Is there a way to effectively incorporate window.clearInterval() into this javascript code to achieve the desired outcome

Answer №1

Answer №2

Answer №3

Similar questions

What methods does Enzyme have for determining the visibility of components?

removing a specific cookie from the browser's cookies using jQuery

Snippets of the webpage peeking through before the Fakeloader takes over

``The Art of Handling REST API with Express and Mongoose

Stop music with one click, code in Javascript

Having issues with React-router v4's this.props.history.push() not functioning as expected

Incorporating arguments within the context of a "for each" loop

Swapping out the default JavaScript random number generator for my custom JSON-based solution

The issue with the full postback in the updatepanel is triggered by utilizing JavaScript on the button's onclick event within

Searching for a single cell within an HTML table

Discovering the optimum route within a 2D array given specific limitations using Dynamic Programming

Achieving responsive masonry layout with Bootstrap 4

Utilize jQuery to select the parent checkbox and mark it as checked

Determine the index of a specific character within a string using a "for of" loop

The hamburger icon seems to be frozen and unresponsive

What are the steps to showcase a webcam stream in GLSL by leveraging Three.js?

Unresponsive JavaScript on specific element IDs

What is the best way to set the sidebar height to 100% in Material-UI?

A guide to efficiently reusing parameter definitions in functions using JSDoc

Middleware in Express.js Router