代码之家 › 专栏 › 技术社区 › Em Ae

如何正确使用setInterval和clearInterval

javascript

Em Ae · 技术社区 · 8 年前

这是我写的代码。

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月1日。但它只印了一次。为什么不是 setInterval

2 回复 | 直到 8 年前

Unmitigated 8 年前

你在用 setTimeout (在以毫秒为单位的时间后执行一次函数)而不是 setInterval

文件 :

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

设置超时 :

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>

Damián Pablo González 8 年前

你在用 setTimeOut 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);
  }
}