Question

我试图在浏览器中一个接一个地发生一系列事件，但JavaScript异步使得这很困难。我正在使用jQuery来处理添加和删除类，我想使用标准的JS承诺来使所有事情按顺序发生，但我遇到了困难。我想要做的是将jQuery事件包装在Promise.resolve（）中并使用它来调用.then（）（过去我用AJAX调用已经成功了。）例如：

    makePromise = function() {
      return Promise.resolve($(".mydiv").addClass("grow").promise());
     }
    makePromise().then(function() {
      alert("running");
    })

    .mydiv {
      height: 100px;
      width: 100px;
      background-color: blue;
    }

    .mydiv.grow {
	    transition: width 2s;
        width: 500px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">
    </div>

JS Fiddle Here

目的是让jQuery事件运行它的过程，然后在then（）调用中运行正在进行的操作，但是你可以看到它正在进入下一步而不等待。有没有办法使这个游戏工作或我完全走错了方向？帮帮我Stack Overflow Hivemind，你是我唯一的希望。

Answer 1

默认情况下，JavaScript为synchronous。因此，如果不是async调用

，那么您可以一个接一个地制作任何窗口事件

setTimeout

AJAX

Promise（不是直接）

因此，您可以在不使用Promise的情况下对事件进行排序。

$(".mydiv").addClass("grow");

setTimeout(function() {
  alert("running");
  }, 2000);

.mydiv {
      height: 100px;
      width: 100px;
      background-color: blue;
      transition: width 2s;
    }

    .mydiv.grow {
      width: 500px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">
    </div>

甚至Promise用于使JavaScript异步。

作为一个例子

var promise = new Promise(function(resolve, reject){
  console.log("First"); //Executes first.
  resolve();
});

promise.then(function(){ //purely async, called and not waited for response
  console.log("Third"); //after execution of promise.
});

console.log("second"); //not waited for promise.then

然后期望使用Promise进行顺序执行。我们需要一些asynchronism让resolve等待一段时间，因此使用基本setTimeout来实现此目的。

makePromise = function() {
      return new Promise(function(resolve, reject){
         $(".mydiv").addClass("grow").promise()
         setTimeout(resolve, 1000);
      })
     }
    makePromise().then(function() {
      alert("running");
    })

.mydiv {
      height: 100px;
      width: 100px;
      background-color: blue;
      transition: width 3s;
    }

    .mydiv.grow {
      width: 500px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">
    </div>

注意：我认为transition width存在问题。纠正它以获得更好的结果。

希望这有帮助。

使用标准JS promises与jQuery addClass调用

1 个答案: