追加到空元素不起作用

我想显示一个字符串，存储在一个数组中，逐个字符。当我使用以下代码调用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

追加到空元素不起作用

回答

相关问题