Javascript jQuery-按顺序运行多个方法_Javascript_Jquery_Methods

Javascript jQuery-按顺序运行多个方法

javascript jquery methods

Javascript jQuery-按顺序运行多个方法,javascript,jquery,methods,Javascript,Jquery,Methods,如果我这样做： method(); method(); 两个调用将并行运行（同时）我只想做第二种方法（）；等待第一个方法（）；在开始之前完成，并动态执行，因为我不知道要启动多少次method（）；同时, 可能吗举个例子，在我看到的同时运行看一看希望此示例一定已清除您的查询 Javascript和大多数其他语言都按顺序运行代码因此，它们不会同时运行事实上，不可能同时运行两段不同的Javascript代码。但是，在许多其他语言中，可以使用线程但是，如果它们进行AJAX调用，两个函数

如果我这样做：

method();
method();

两个调用将并行运行（同时）

我只想做第二种方法（）；等待第一个方法（）；在开始之前完成，并动态执行，因为我不知道要启动多少次method（）；同时,

可能吗

举个例子，在我看到的同时运行

看一看

希望此示例一定已清除您的查询

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

因此，它们不会同时运行

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

但是，如果它们进行AJAX调用，两个函数调用的相应服务器端代码将同时运行。

为了防止出现这种情况，您需要让第一个函数接受回调参数，并将其传递给第二个函数。

使用

回调

：

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

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

现在您可以运行它了：

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

控制台中的结果是：

a
b
c

它对您有帮助吗？

如果您返回一个

例如

然后你可以做：

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

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

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

下面是使用

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{
宽度：50px；高度：50px；背景色：#093；
-webkit转换：所有300毫秒的易用性；
}
div.move{-webkit转换：translate3d（200px，0,0）；}/*GPU硬件加速*/
（功能（W）{
变量D，D，L，c=0；
函数init（）{
D=W.document；D=D.getElementsByTagName（'div'）；L=D.length；var L=D.length；
while（l--）{d[l].addEventListener（'transitionend'，next，false）}
next（）；
}
函数next（）{
d[c].classList[（d[c].className=='move'？'remove'：'add'）]（'move'）；
C++；C＝（C＝＝L？0：C）；
}
W.addEventListener（'load'，init，false）；
})（窗口）

现在几乎没有什么错误得到纠正

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

您的

method（）

将是我的

next（）

如果有人想把它藏起来。。。我不用那个

备注：纯javascript（无jquery）+css3（带-webkit前缀）

范例

如果我问你一个小例子：p，我会问得太多吗？please@sbaaaang：Matthias链接到的文档页面上的示例如何？我真的无法从示例中理解如何使用它，因为它通过队列使用了一个奇怪的“fx”，我不知道它是什么：/它只是队列的一个名称。比如“玛丽亚”、“露西亚”、“fx”；）@霜来吧，请在这里举个例子好吗？我对这个该死的队列感到不安，但我不能很好地理解：（Javascript不支持多线程。你是说AJAX吗？如果是，请使用承诺。如果你在代码中描述的内容没有使用（fileReader、Xhr、Canvas或任何异步的东西）它将按顺序执行。您的示例按顺序执行。@cocco确实我需要一些技巧来排队或类似的东西，因为它们是同步方法。您想等到下一个函数执行吗？是的，确切地说@cocco下一个必须等到上一个函数完全执行。我想排队是唯一的解决方案ate排序方法数组，然后逐个启动它，但问题仍然存在，因为我需要确保前一个方法在启动下一个方法之前已完成，但这没有帮助因为运行代码您需要知道要启动多少个方法（），如果可能，我不知道它应该动态排队：Pfunction method（a） {console.log（a）}；method（'a'）；method（'b'）；method（'c'）；做同样的事情。问题是我现在不知道我将调用method（）多少次；因为method（）是在websocket收到数据后调用的。这是一个例子，其中_数据是从websocket随机返回的@plax我没有这个变量colors=['red'，blue'，yellow']因为颜色是从WebCoket中随机返回的，所以每个颜色都是随机的seconds@sbaaaang，我看不出有什么问题？

var something=socketresult；

，如果结果是一个集合，则处理它。如果不是，则更容易，只需保留对上一个延迟的

的引用，让它成为d
，您就可以这样做d.then（…）
@sbaaang始终保留对上一个延迟的的引用，它将成为您对下一个操作进行排队的入口点。对于第一个操作，您执行var d=d？d.then（method）：method（）；
，然后后续操作就是d=d.then（…）。它将有效地对所有异步操作排队。
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;
    });
});

<!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>