Question

我已编写此代码以获取div中的Timer值：

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

当我将var timerGenartor与div链接时，此代码有效。但是，现在我想将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;
    })();

通过此修改，没有任何内容返回或显示在控制台中，我不明白为什么。但是，评论“console.log”给了我很好的计时器。那么，为什么第一个console.log显示的是好结果而不是第二个？

Answer 1

使用两个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>

Answer 2

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

返回字符串的问题

2 个答案: