Question

我已经设置了一些功能。一个是打字效果，一个用于段落，另一个用于添加“”，一个用于闪烁光标，如终端。所有这些都改变了div的innerHTML。

当页面加载函数时，Start（）里面有大约10个函数，它们构成了应该发生的一系列：写入文本，光标开始闪烁，段落，再次写入文本等等。

问题是，除非我对Start（）函数中的每一个使用setTimeout（），否则它们都会同时执行。鉴于我必须为每个函数定义一个开始时间，这就搞砸了。

编辑：这里没有JQuery。只是javascript。这是我的整个JS文件：

ctrl = 0;
y=0;
block = 0;
test = "";
first_time = 1;

function typing(id, sentence){

        var index=0;
        var intObject= setInterval(function() {
               document.getElementById(id).innerHTML+=sentence[index]; 
               index++;
               if(index==sentence.length){
                     clearInterval(intObject);
                }
            }, 100);
}


function paragraph(x){
    while(x>0){
        document.getElementById("container").innerHTML+="<br>";
        x--;
    }
}

function advance(x){
    while(x>0){
        document.getElementById("container").innerHTML+="&nbsp;";
        x--;
    }
}


function blink(y){
    if(first_time == 1){ctrl = y; first_time=0;}
    if(ctrl!=0){
        if(block=='0'){
        test = document.getElementById("container").innerHTML;
            document.getElementById("container").innerHTML+="\u258B";
            block=1;
        }
        else if(block=='1'){
            document.getElementById("container").innerHTML=test;
            block=0;
        }
        ctrl--;
        setTimeout("blink(y);", 300);
    }
    if(ctrl==0){first_time=1;}
}


function start(){
    typing('container','Subject Name:');
    setTimeout("blink('4');",1700);
    setTimeout("typing('container',' Carlos Miguel Fernando');",2800);
    setTimeout("blink('6');",5600);
    setTimeout("paragraph('1');",7200);
    setTimeout("blink('8');",7400);
    setTimeout("typing('container','Age: 21');",9500);
    setTimeout("blink('4');",10800);
    setTimeout("paragraph('1');",12800);
    setTimeout("blink('4');",13200);
    setTimeout("typing('container','Location: Povoa de Varzim, Portugal');",14500);
    setTimeout("blink('14');",19000);
    setTimeout(function(){document.getElementById("more").style.display="block";}, 23000);
    setTimeout("typing('more','Find Out More');",24000);
}

Answer 1

首先，你需要一种方法来找出函数何时结束。理想的机制称为承诺。在jQuery中有一个很好的实现。假设您的活动列表中存在人为延迟：

blink(4);
sleep(1000);   // wait 1 second
blink(4);

像这样实施：

var sleep = function(ms) {
    var result = $.Deferred();
    setTimeout(result.resolve, ms);
    return result.promise();
};

即。创建一个$.Deferred，并返回其promise()，但在两者之间，启动一些将在稍后完成的活动。如果是，请拨打resolve()（此处我只是setTimeout直接调用它）。您可以将值传递给resolve，使其成为函数的逻辑“返回值”。您也可以调用reject，这在逻辑上就像抛出异常一样。

一旦你有一组返回promises的构建块函数，你可以这样做：

typing('container','Subject Name:').then(function() {
   return blink('4');
}).then(function() {
   return typing('container',' Test');
}).then(function() {
   return blink('4');
}).then(function() {
   // and so on
});

<强>更新

Click here to see a quick mock-up in jsbin

Answer 2

检查以下代码

function blink(id)
{
    //Do something
    alert(id);

    if(id == 2)
    {
        //call typing with text
        blink(4);
    }
    if(id == 4)
    {
        //call typing with text
        blink(6);
    }
    if(id == 6)
    {
        //call typing with text
        blink(8);
    }
    if(id == 8)
    {
        //Complete
    }
}

然后拨打眨眼（2）;它会一个接一个地调用闪烁功能。

Javascript使函数一个接一个地执行

2 个答案: