jquery - jQuery - 等待一个元素被关闭

Question

我在我的网站上做了一个简单的“弹出窗口”。

function popup(message) {
  $("#popup").text(message);
  $("#popup").show();
  $("#popup").click(function() {
    $("#popup").hide();
  });
}

我想显示一些弹出窗口，其中一个。我想让它们声明如下：

popup("Message 1");
popup("Message 2");
.
.
popup("Message n");

但我希望在第一个弹出窗口关闭后显示第二个弹出窗口（通过单击它）。

所以像：

$("#popup").click(function() {
  // display the next popup
});

如何让我的代码等到弹出窗口关闭？

标签： jquery

Answer 1

添加一个在弹出窗口关闭时调用的回调参数：

function popup(message, onClose) {
  $("#popup").text(message);
  $("#popup").show();
  $("#popup").one('click', function() {
    $("#popup").hide(onClose);
  });
}

并在回调函数中打开下一个弹出窗口：

popup("Message 1", function () {
  popup("Message 2", function () {
    // ...
  });
});

我替换.click(为.one('click'确保在弹出窗口关闭时只调用一次回调。否则会多次调用一个回调（当每个弹出窗口关闭时）。

演示

---

您还可以使用jQuery Deferred为弹出窗口链制作更漂亮的语法：

function popup(message) {
  var deferred = $.Deferred();
  $("#popup").text(message);
  $("#popup").show();
  $("#popup").one('click', function() {
    $("#popup").hide(deferred.resolve);
  });
  return deferred.promise();
}

popup("Message 1")
  .then(function() { return popup("Message 2"); })
  .then(function() { return popup("Message 3"); })
  // ...
  .then(function() { return popup("Message n"); });

演示