追加到空元素无效

Appending to empty element does not work

本文关键字：无效 元素 追加      更新时间：2023-09-26

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

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

该警报显示除每个间隔不存在外，其他一切都正常工作。

我不明白为什么。

注意：睡眠是我定义的一个函数，适用于设定的时间量

JavaScript是单线程的。它正忙于循环运行while循环，无法重新绘制页面。

不要试图编写睡眠函数。这种语言不适合它，只会占用CPU。重写代码以使用setInterval或setTimeout。

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

只需尝试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>
相关文章：