如何正确使用setInterval和clearInterval

Question

这是我编写的代码。

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);
  }
}

我期望strDate可以打印从4月7日到5月01日的日期。但是它只打印一次。 为什么setInterval不能正常工作

Answer 1

您使用的是setTimeout （在以毫秒为单位的时间后执行一次函数），而不是setInterval （连续执行一个函数）。

setInterval的文档：

WindowOrWorkerGlobalScope mixin的setInterval（）方法重复调用函数或执行代码段，每次调用之间有固定的时间延迟。 它返回一个唯一标识该间隔的间隔ID，因此您以后可以通过调用clearInterval（）将其删除。

setTimeout的文档：

WindowOrWorkerGlobalScope mixin的setTimeout（）方法（和window.setTimeout的后继方法）设置一个计时器，该计时器在计时器到期后执行一次功能或指定的代码。

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

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

  jobDate = jobDate.addDays(1);

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

演示：

 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

您正在使用setTimeOut （仅执行一次），而不是setInterval（）

setInterval（）方法以指定的时间间隔（以毫秒为单位）调用函数或计算表达式。 setInterval（）方法将继续调用该函数，直到调用 clearInterval（）或关闭窗口为止。

-

setTimeout（）方法将在指定的毫秒数后调用一个函数或对一个表达式求值。 提示： 该功能仅执行一次。 如果需要重复执行，请使用setInterval（）方法。

对于您的情况，请尝试：

 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); } }