如何正确使用setInterval和clearInterval

Question

Here is code that I wrote.

function formatDate(date) {
  var day;
  if (date.getDate() < 10) {
    day = "0" + date.getDate();
  } else {
    day = date.getDate();
  }

  var month;
  var tempMonth = date.getMonth() + 1;
  if ( tempMonth < 10){
    month = "0" + tempMonth;
  } else {
    month = tempMonth;
  }
  var year = date.getFullYear();

  return year + "-" + month + "-" + day;
}

Date.prototype.addDays = function(days) {
    var date = new Date(this.valueOf());
    date.setDate(date.getDate() + days);
    return date;
}

jobDate = new Date(2016, 3, 7);
endDate = new Date(2016, 4, 1);
expireInterval = false;

timeoutVar = setTimeout(runJobFromJS,1000);

function runJobFromJS(){
  var strDate = formatDate(jobDate);
  console.log(strDate);

  jobDate = jobDate.addDays(1);

  if (jobDate >= endDate){
    clearInterval(timeoutVar);
  }
}

I was expecting that strDate will print dates from April 07 till May 01. But it is only printing it once. Why isn't that setInterval not working proper

Answer 1

You are using setTimeout (executes a function once after an amount of time in milliseconds) instead of setInterval (continuously executes a function).

The documentation for setInterval :

The setInterval() method of the WindowOrWorkerGlobalScope mixin repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. It returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().

The documentation for setTimeout :

The setTimeout() method of the WindowOrWorkerGlobalScope mixin (and successor to window.setTimeout) sets a timer which executes a function or specified piece of code once after the timer expires.

timeoutVar = setInterval(runJobFromJS,1000);//not setTimeout

function runJobFromJS(){
  var strDate = formatDate(jobDate);
  console.log(strDate);

  jobDate = jobDate.addDays(1);

  if (jobDate >= endDate){
    clearInterval(timeoutVar);
  }
}

Demo:

 function formatDate(date) { var day; if (date.getDate() < 10) { day = "0" + date.getDate(); } else { day = date.getDate(); } var month; var tempMonth = date.getMonth() + 1; if ( tempMonth < 10){ month = "0" + tempMonth; } else { month = tempMonth; } var year = date.getFullYear(); return year + "-" + month + "-" + day; } Date.prototype.addDays = function(days) { var date = new Date(this.valueOf()); date.setDate(date.getDate() + days); return date; } jobDate = new Date(2016, 3, 7); endDate = new Date(2016, 4, 1); expireInterval = false; timeoutVar = setInterval(runJobFromJS,1000); function runJobFromJS(){ var strDate = formatDate(jobDate); document.getElementById("result").textContent = strDate; //console.log(strDate); jobDate = jobDate.addDays(1); if (jobDate >= endDate){ clearInterval(timeoutVar); } } 

 <span id="result"></span> 

Answer 2

You're using setTimeOut (execute only once) instead of setInterval()

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds). The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.

--

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. Tip: The function is only executed once. If you need to repeat execution, use the setInterval() method.

In your case, try:

 function formatDate(date) { var day; if (date.getDate() < 10) { day = "0" + date.getDate(); } else { day = date.getDate(); } var month; var tempMonth = date.getMonth() + 1; if ( tempMonth < 10){ month = "0" + tempMonth; } else { month = tempMonth; } var year = date.getFullYear(); return year + "-" + month + "-" + day; } Date.prototype.addDays = function(days) { var date = new Date(this.valueOf()); date.setDate(date.getDate() + days); return date; } jobDate = new Date(2016, 3, 7); endDate = new Date(2016, 4, 1); expireInterval = false; timeoutVar = setInterval(runJobFromJS,1000); //here! function runJobFromJS(){ var strDate = formatDate(jobDate); console.log(strDate); jobDate = jobDate.addDays(1); if (jobDate >= endDate){ clearInterval(timeoutVar); } }