返回字符串的问题

Question

我写了这段代码来获取div中定时器的值：

var timerGenerator = (function() {
        var time = {
            centiSec: 0,
            secondes: 0,
            minutes: 0,
            hours: 0
        };
        var container = document.createElement("div");
        var timeDisplay = function() {
            function smoothDisplay(value) {
                return (value < 10 ? '0' : '') + value;
            }
            return "" + smoothDisplay(this.hours) + ":" + smoothDisplay(this.minutes) + ":" + smoothDisplay(this.secondes) + "." + smoothDisplay(this.centiSec);
        };
        var boundTimeDisplay = timeDisplay.bind(time);

        var timeUpdate = function() {
            container.innerHTML = boundTimeDisplay();
            //console.log(container);
            this.centiSec++;
            if(this.centiSec === 100) {
                this.centiSec = 0;
                this.secondes++;
            }
            if(this.secondes === 60) {
                this.secondes = 0;
                this.minutes++;
            }
            if(this.minutes === 60) {
                this.minutes = 0;
                this.hours++;
            }
        };
        var boundTimeUpdate = timeUpdate.bind(time);

        window.setInterval(boundTimeUpdate,10);
        console.log(container);
        return container; 
    })();

当我 link 具有 div 的 var timerGenartor 时，此代码有效。但是，现在我想把return 的var 容器变成一个字符串。所以我将代码更改为：（我只是更改了容器的初始化和此值）

    var timerGenerator = (function() {
        var time = {
            centiSec: 0,
            secondes: 0,
            minutes: 0,
            hours: 0
        };
        var container = "";

        var timeDisplay = function() {
            function smoothDisplay(value) {
                return (value < 10 ? '0' : '') + value;
            }
            return "" + smoothDisplay(this.hours) + ":" + smoothDisplay(this.minutes) + ":" + smoothDisplay(this.secondes) + "." + smoothDisplay(this.centiSec);
        };
        var boundTimeDisplay = timeDisplay.bind(time);

        var timeUpdate = function() {
            container = boundTimeDisplay();
            //console.log(container);
            this.centiSec++;
            if(this.centiSec === 100) {
                this.centiSec = 0;
                this.secondes++;
            }
            if(this.secondes === 60) {
                this.secondes = 0;
                this.minutes++;
            }
            if(this.minutes === 60) {
                this.minutes = 0;
                this.hours++;
            }
        };
        var boundTimeUpdate = timeUpdate.bind(time);

        window.setInterval(boundTimeUpdate,10);
        console.log(container);
        return container;
    })();

进行此修改后，控制台中不会 return 编辑或显示任何内容，我不明白为什么。但是，评论 "console.log" 给了我很好的计时器。那么，为什么第一个 console.log 显示好的结果而不是第二个呢？

Answer 1

这可能是因为您的容器是空的，因为它是在 timeUpdate 函数中初始化的，由于 setInterval，该函数最终在 10 毫秒后（第一次）被调用。在将其放入 setInterval 之前，您必须调用 timeUpdate 函数。

Answer 2

两个 JS 函数的工作代码如你所愿

// JS 1
var timerGenerator = (function() {
        var time = {
            centiSec: 0,
            secondes: 0,
            minutes: 0,
            hours: 0
        };
        var container = "";

        var timeDisplay = function() {
            function smoothDisplay(value) {
                return (value < 10 ? '0' : '') + value;
            }
            return "" + smoothDisplay(this.hours) + ":" + smoothDisplay(this.minutes) + ":" + smoothDisplay(this.secondes) + "." + smoothDisplay(this.centiSec);
        };
        var boundTimeDisplay = timeDisplay.bind(time);

        var timeUpdate = function() {
            container = boundTimeDisplay();
            //console.log(container);
            this.centiSec++;
            if(this.centiSec === 100) {
                this.centiSec = 0;
                this.secondes++;
            }
            if(this.secondes === 60) {
                this.secondes = 0;
                this.minutes++;
            }
            if(this.minutes === 60) {
                this.minutes = 0;
                this.hours++;
            }
          return container;
        };
        var boundTimeUpdate = timeUpdate.bind(time);

        return boundTimeUpdate;
    })();


// JS 2
var spanGenerator = (function() {
  var container = document.createElement('span');
  
  window.setInterval(function(){
    container.innerHTML = timerGenerator();
  }, 10);
  
  return container;
  
})();

document.getElementById('timer').appendChild(spanGenerator);

<div id="timer"></div>

返回字符串的问题

Issue with returning a string

javascript

string

setinterval