jQuery - 按順序運行多個方法

Question

如果我做：

method();
method();

兩個調用將並行運行（同時）

我只想制作第二種方法（）; 等到第一個方法（）; 在開始之前完成，並且動態地做，因為我不知道我將啟動method（）多少次; 在同一時間。

可能嗎？

例如，那些在我能看到的同時運行... http://jsfiddle.net/Lcgb8/

Answer 1

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

例如

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);

請注意，每個調用的返回值將分別作為第一個參數傳遞給下一個調用。

編輯：這是一個關於如何動態排隊異步操作的示例。

小提琴

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()

如果有人想要jsfiddle它...我不使用它。

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! " );
     });

希望此示例必須已清除您的查詢

現場演示

Javascript和大多數其他語言按順序運行代碼。

因此，它們不會同時運行。

實際上，不可能同時運行兩個不同的Javascript代碼。 但是，在許多其他語言中，可以使用線程。

但是，如果它們進行AJAX調用，則兩個函數調用的相應服務器端代碼將同時運行。 為了防止這種情況，您需要使第一個函數接受一個回調參數並將其傳遞給第二個函數。

jQuery - 按順序運行多個方法

問題描述

5 個解決方案

解決方案1
2 已采納 2013-08-18 20:21:31

解決方案2
1 2013-08-18 20:36:08

解決方案3
0 2013-08-18 19:31:24

解決方案4
0 2013-08-18 20:10:23

解決方案5
-1 2013-08-18 19:42:58

jQuery - 按順序運行多個方法

問題描述

5 個解決方案

解決方案1 2 已采納 2013-08-18 20:21:31

解決方案2 1 2013-08-18 20:36:08

解決方案3 0 2013-08-18 19:31:24

解決方案4 0 2013-08-18 20:10:23

解決方案5 -1 2013-08-18 19:42:58

解決方案1
2 已采納 2013-08-18 20:21:31

解決方案2
1 2013-08-18 20:36:08

解決方案3
0 2013-08-18 19:31:24

解決方案4
0 2013-08-18 20:10:23

解決方案5
-1 2013-08-18 19:42:58