为什么这个倒计时时钟代码返回一个未定义的字符串？

Question

我尝试创建一个非常简单的Javascript时钟，从用户指定的时间倒数到0，但由于某种原因，它会一直返回＆＃39; undefined＆＃39;作为一个字符串。这是时钟的来源：

＆＃13;

＆＃13;

function startTimer(duration) {
  desap = duration - (new Date).getTime() / 1000;
  var timer = desap,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display = "Ends in " + minutes + " mins and " + seconds + " secs";

    if (--timer < 0) {
      display = "Ended";
    }
    return display;
  }, 1000);
}

document.write(startTimer(999999999999999))

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 1

理想情况下，我会倾向于使用.textContent javascript属性，而不是document.write：

＆＃13;

＆＃13;

var displayTimer = document.getElementsByClassName('display-timer')[0];

function startTimer(duration) {

  setInterval(function() {
    var timer = duration - (new Date).getTime() / 1000;
    var minutes = parseInt(timer / 60, 10)
    var seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    var display = "Ends in " + minutes + " mins and " + seconds + " secs";

    if (--timer < 0) {
      display = "Ended";
    }

    displayTimer.textContent = display;

  }, 1000);
}

window.addEventListener('load',function(){startTimer(999999999999999);},false);

＆＃13;

<div class="display-timer">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

它不会将undefined作为字符串返回。它只返回undefined，这是因为代码中没有return语句。

return语句位于setInterval

的回调内

示例代码

＆＃13;

＆＃13;

function startTimer(duration) {
  desap = duration - (new Date).getTime() / 1000;
  var timer = desap,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display = "Ends in " + minutes + " mins and " + seconds + " secs";

    if (--timer < 0) {
      display = "Ended";
    }
    return display;
  }, 1000);
}

var a = startTimer(999999999999999);
document.write("Value of a is: ", a, " and type is: ", typeof(a))

＆＃13;

＆＃13;

＆＃13;

如果你想获得计时器，你可以尝试这样的事情：

＆＃13;

＆＃13;

function startTimer(duration) {
  desap = duration - (new Date).getTime() / 1000;
  var timer = desap,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display = "Ends in " + minutes + " mins and " + seconds + " secs";

    if (--timer < 0) {
      display = "Ended";
    }
    return display;
  }, 1000);
}

var a = startTimer(999999999999999);
document.write("Value of a is: ", a, " and type is: ", typeof(a))

＆＃13;

＆＃13;

＆＃13;

如果你想在UI上显示计时器，你应该使用回调：

＆＃13;

＆＃13;

function startTimer(duration, callback) {
  desap = duration - (new Date).getTime() / 1000;
  var timer = desap,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display = "Ends in " + minutes + " mins and " + seconds + " secs";

    if (--timer < 0) {
      display = "Ended";
    }
    if(callback) callback(display);
  }, 1000);
}

var a = startTimer(999999999999999, notify);
function notify(str){
  document.getElementById("timerContent").innerHTML = str;
}

＆＃13;

<div id="timerContent"></div>

＆＃13;

＆＃13;

＆＃13;

参考

• setInterval
• How to return value from setInterval/setTimeout

Answer 3

为什么不把document.write放在间隔内？

＆＃13;

＆＃13;

function startTimer(duration) {
  var desap = duration - (new Date().getTime()) / 1000;

  var timer = desap;

  var minutes = 0;
  var seconds = 0;
  var display = "";

  setInterval(function () {
    minutes = parseInt(timer / 60, 10)      
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display = "Ends in " + minutes + " mins and " + seconds + " secs <br/>";
    if (--timer < 0)
      display = "Ended";

    document.write(display);
  }, 1000);		
}

startTimer(999999999999999);

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这个代码片段，我禁用了document.write，因为JSFiddle不允许使用这个函数，而是使用console.log来显示输出。您可以稍后更改。

编辑：您收到一个未定义的错误，因为您使用的是匿名函数，而且正在使用＆＃34; setInterval＆＃34;你没有任何主要功能的回报＆＃34; startTimer ＆＃34;

＆＃13;

＆＃13;

	function startTimer(duration) {
		desap = duration - (new Date).getTime() / 1000;
		var timer = desap, minutes, seconds;
    
setInterval(function () {
			minutes = parseInt(timer / 60, 10)
			seconds = parseInt(timer % 60, 10);
			minutes = minutes < 10 ? "0" + minutes : minutes;
			seconds = seconds < 10 ? "0" + seconds : seconds;
			display = "Ends in " + minutes + " mins and " + seconds + " secs";
			
			if (--timer < 0) {
				display = "Ended";
		}
    //document.write(display);
console.log(display);
		return display;
		}, 1000);

	}

startTimer(999999999999999);

＆＃13;

＆＃13;

＆＃13;

Answer 5

在OP代码document.write(startTimer(999999999999999))中，您无法返回任何变量，因此它将是未定义的，即使您返回它也只会获得一次，因为startTimer只运行一次。setInterval内部函数，因此在document.write内写setInterval function of startTime将是有效的。

<div id="timing"></div>
<script type="text/javascript">
 var show = document.getElementById("timing");
    function startTimer(duration) {
        desap = duration -  1000;
        var timer = desap;
        clock = setInterval(function() {    
                var minutes, seconds,display;
                 minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);
                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;
                display = "Ends in " + minutes + " mins and " + seconds + " secs";
                if (--timer < 0) {
                  clearInterval(clock);
                  display = "Ended";
                }
                else{
                show.innerHTML = display;    
               }   
              },1000);     
}

startTimer(999999999999999);
</script>