Javascript setTimeout多个和ajax以及等待时间

时间:2014-12-12 14:04:50

标签: javascript time delay settimeout

很长一段时间以来,我一直在努力创建一个可以使用多个setTimeout的Javascript函数,并等到检查一个值。

我有一个表单输入:

 <input type="hidden" id="answer_content" value="start" />;

   if($('#answer_content').val()=='start')
    {
     1)create a content with an ajax request that generate a div
     1.1)when the request is finished , $('#answer_content').val('NEW_DIV_ID')
     1.2)then i use this id = NEW_DIV_ID to make another ajax request (move the DIV)
     1.3)Then when it's finished i change $('#answer_content').val('start');
    }

这里我需要等到过程1)完成并且存在DIV元素 然后我需要运行过程2)3)4)5)6)
(所有过程之间只有很小的变化,比如div大小,边框颜色....)
所以过程几乎相同

我可以使用多个setTimeout使用延迟= 1000作为第一个函数,然后延迟= 2000表示第二个....而6000表示最后一个。

   setTimeout(function(){ content_1(); }, 1000);
    setTimeout(function(){ content_2(); }, 2000);
    setTimeout(function(){ content_3(); }, 3000);
    setTimeout(function(){ content_4(); }, 4000);
    ......

它有效,但我想要的东西只有在完成前一个过程才能避免错误。

1 个答案:

答案 0 :(得分:0)

也许是这样的:

window.step = 1;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        switch(step){
            case 1:
                // do something with xhr response (xhr.responseText);
                step++;
                xhr.open("GET", url2, true);
            break;
            case 2:
                // do something with xhr response #2 (xhr.responseText);
                step++;
                xhr.open("GET", url3, true);                
            break;
            case 3:
                // do something with xhr response #3 (xhr.responseText);        
            break;
        }
    }else{
        console.log('error occured in request no#' + step);
    }
}
xhr.open("GET", url1, true);