追加到空元素不起作用

我想顯示一個字符串，存儲在一個數組中，逐個字符。當我使用以下代碼調用threadsleep（a）：http://jsfiddle.net/thefiddler99/re3qpuoo/時，它會一次出現。問題在於某處這裏我相信追加到空元素不起作用

for (var i = 0; i < str.length; i++) { 
     $('#hello').append(str[i]) 
     alert("foo") 
     sleep(500) 
};

警報顯示一切除了每個之間的間隔不存在正常工作。

我不明白爲什麼。

注：睡眠是我所定義的函數，對於時間

來源

2014-09-06 Tejas Ramdas

JavaScript是單線程的集工程量。它太忙了，無法繞過while循環來執行對頁面的重繪。

不要嘗試寫睡眠功能。該語言不適合它，它只是砰的一聲CPU。重寫您的代碼以改爲使用setInterval或setTimeout。

var i = 0; 

next(); 

function next() { 
    $('#hello').append(str[i]); 
    i++; 
    if (i < str.length) { 
     setTimeout(next, 500); 
    } 
}

來源

2014-09-06 09:30:42 Quentin

我相信這是但爲什麼不工作了編寫代碼的理想方式？ – Sunand 2014-09-06 09:38:02

我沒有想到將for循環重寫爲一個函數，所以我迷失了方向！謝謝。 – 2014-09-06 09:54:49

@孫 - 我在這個答案的第一段中解釋。 – Quentin 2014-09-06 09:57:15

只需嘗試setTimeOut遞歸調用即可。

Demo

<script> 
    var text="This string will be display one by one."; 
    var delay=500; 
    var elem = $("#oneByOne"); 
    var addTextByDelay = function(text,elem,delay){ 
     if(!delay){ 
      delay = 500; 
     } 
     if(text.length >0){ 
      //append first character 
      elem.append(text[0]); 
      setTimeout(
       function(){ 
        //Slice text by 1 character and call function again     
        addTextByDelay(text.slice(1),elem,delay);    
       },delay     
       ); 
     } 
    } 

    addTextByDelay(text,elem,delay); 
</script>

來源

2014-09-06 09:38:48 ashokhein

追加到空元素不起作用

回答

相關問題