javascript - 使用标准 JS Promise 和 jQuery addClass 调用

Question

我试图让一系列事件在浏览器中一个接一个地发生，但是 JavaScript 是异步的，这使得这变得很困难。我正在使用 jQuery 来处理添加和删除类，并且我想使用标准 JS Promise 使一切按顺序发生，但我遇到了困难。我想做的是将 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默认情况下。因此，如果窗口事件不是像

这样的 异步调用，那么您可以一个接一个地进行任何窗口事件

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 进行顺序执行的期望。我们需要一些异步来要求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>

注意:我认为您的宽度的转换存在一些问题。纠正它以获得更好的结果。

希望这有帮助。