問題與返回的字符串

我寫了這個代碼，以獲得一個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; 
 
    })();

此代碼的工作，當我有一個div鏈接VAR timerGenartor。但是，現在我想將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顯示好的結果而不是第二個？

來源

2016-11-11 Lodec

釷第一個返回空'div'，第二個返回空字符串，因爲你在控制檯前寫'setInterval'激發。讓我知道你的實際目的是什麼，而不是'console.log'，我將相應地更改代碼 – Aruna

第一個不會返回空div，因爲當我在另一個js文件中創建一個div併爲其提供timerGenerator的值時作品。我的實際目的是將字符串返回到span標籤，但span標籤來自另一個js文件。 – Lodec

我的意思是'div'的'console.log'，它是空'div'。好吧，我會改變你的代碼。 – Aruna

工作代碼如你預期有兩個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>

來源

2016-11-11 12:21:31 Aruna

爲什麼我不想早些把setInterval放到第二個JS中。它非常完美，非常感謝。 – Lodec

@Lodec無論如何，你的代碼看起來不錯。我upvoted它:-) – Aruna

這可能是因爲你的容器是空的，因爲它是在timeUpdate函數中初始化的，因爲setInterval最終會在10ms以後（第一次）被調用。 U在將它放入setInterval之前必須調用timeUpdate函數。

來源

2016-11-11 12:06:18

問題與返回的字符串

回答

相關問題