Question

我想逐个显示存储在数组中的字符串的字符。当我使用以下代码调用threadsleep（a）时：http://jsfiddle.net/thefiddler99/re3qpuoo/，它会立即出现。问题出在这里我认为

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

警报显示一切正常，但每个之间的间隔不存在。

我无法弄清楚原因。

注意：睡眠是我定义的一个功能，它适用于设定的时间

Answer 1

JavaScript是单线程的。它太忙于围绕你的while循环运行以重新绘制页面。

不要尝试编写睡眠功能。这种语言并不适合它，它只是扼杀CPU。重写您的代码以改为使用setInterval或setTimeout。

var i = 0;

next();

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

Answer 2

尝试使用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>

附加到空元素不起作用

2 个答案: