Question

如果我这样做：

method();
method();

两个调用将并行（同时）

我只想制作第二种方法（）;等到第一个方法（）;在开始之前完成，并且动态地做，因为我不知道我将启动method（）多少次;在同一时间。

有可能吗？

例如，那些在我看到的同时运行...... http://jsfiddle.net/Lcgb8/

Answer 1

如果您返回then，则可以使用Deferred。

E.g。

function method() {
    var d = $.Deferred();

    //do something async
    setTimeout(function () {
        d.resolve('some data'); //inform listeners that the process is completed
    }, 2000);

    return d; //return the deferred object
}

然后你可以这样做：

method().then(method).then(method).then(method);

请注意，每个调用的返回值将分别作为第一个参数传递给下一个调用。

编辑：这是一个关于如何动态排队异步操作的示例。

FIDDLE

function changeColorAsync(color) {
    var d = $.Deferred();

    setTimeout(function () {
        $('body').css('background', color);

        d.resolve();

    }, 4000);

    return d;
}

$(function () {
    $('#color-form').on('submit', function (e) {
        var color = $(this).find(':checked').val(), d;

        d = d? 
            d.then(changeColorAsync.bind(this, color)) : 
            changeColorAsync(color);

        return false;
    });
});

Answer 2

这是使用transitionend

的顺序动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animation</title>
<style>
div{
width:50px;height:50px;background-color:#093;
-webkit-transition:all 300ms ease;
}
div.move{-webkit-transform:translate3d(200px,0,0);}/*GPU HW acceleration*/
</style>
<script>
(function(W){
 var D,d,L,c=0;
 function init(){
  D=W.document;d=D.getElementsByTagName('div');L=d.length;var l=d.length;
  while(l--){d[l].addEventListener('transitionend',next,false)}
  next();
 }
 function next(){
  d[c].classList[(d[c].className=='move'?'remove':'add')]('move');
  c++;c=(c==L?0:c);
 }
 W.addEventListener('load',init,false);
})(window)
</script>
</head>
<body><div></div><div></div><div></div><div></div></body>
</html>

现在修复的错误很少..

使用低资源支持无限div和它的无限循环。 =）

您的method()将是我的next()

如果有人想要哄骗它......我不会使用它。

ps。：纯javascript（无jquery）+ css3（带-webkit前缀）;

例如

http://jsfiddle.net/4eujG/

Answer 3

查看jQuery.queue()。

Answer 4

使用callback：

var test = function (letter, callback) {
    console.log(letter);

    if (typeof callback !== 'undefined') {
        callback();
    }
};

现在你可以运行它了：

test('a', function () {
    test('b', function () {
        test('c')
    });
});

控制台中的结果是：

a
b
c

对你有帮助吗？

Answer 5

     $( "div" ).promise().done(function() {
     $( "p" ).append( " Finished! " );
     });

希望此示例必须清除您的查询

LIVE DEMO

Javascript和大多数其他语言，按顺序运行代码。

因此，它们不会同时运行。

事实上，不可能同时运行两个不同的 Javascript 代码。但是，在许多其他语言中，可以使用线程。

但是，如果他们进行AJAX调用，则两个函数调用的相应服务器端代码将同时运行。为了防止这种情况，你需要让第一个函数接受一个回调参数并将它传递给第二个函数。

jQuery - 按顺序运行多个方法

5 个答案: