Ausgabe mit einem String zurückkehr

Question

ich diesen Code geschrieben habe, den Wert des Timer in einem div zu bekommen:

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

Dieser Code funktioniert, wenn ich den var timerGenartor mit einem div verknüpfen. Aber jetzt möchte ich den var-Container in eine Zeichenfolge zurückgeben. Also änderte ich meinen Code so aus: (Ich habe gerade die Initialisierung des Behälters und diesen Wert)

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

Mit dieser Modifikation wird nichts in der Konsole zurückgegeben oder Anzeige und ich verstehe nicht, Warum. Der Kommentar "console.log" gibt mir jedoch den Timer gut. Warum zeigt die erste console.log das gute Ergebnis und nicht das zweite?

Answer 1

Der Arbeits Code wie erwartet mit zwei JS Funktionen

// 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

Es kann sein, weil Ihr Container leer ist, wie es in timeUpdate-Funktion initialisiert wird, die schließlich 10ms später (zum ersten Mal) wegen der setInterval aufgerufen wird. U muss die Funktion timeUpdate aufrufen, bevor sie in setInterval gesetzt wird.