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

如何使我的代码等待直到弹出窗口关闭？

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'，以确保在关闭弹出窗口时仅调用一次回调。否则，一次回调将被调用多次（每个弹出窗口关闭时）。

Demo

您还可以使用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"); });

Demo

Answer 2

我强烈建议您看看BootStrap's modal来完成此操作...

但是您希望调用消息的方式是特别的...而且下面的内容仍然可以用于Bootstrap模式。

所以，关键是调用popup()函数不会等待。因此，您必须将所有这些消息推送到一个数组中，并等待单击以使用索引“循环”它们。

查看代码中的注释。

var messages = [];
var message_index = 0;
var popup_el = $("#popup");

function popup(message) {
  
  // Push the message in the array.
  messages.push(message);
  
  // If the popup element already is visible, stop here.
  if(popup_el.is(":visible")){
    return;
  }
  
  // Show the message (works on first... Then the click handler dos it.
  popup_el.text(message).show();
  
  // Click handler
  popup_el.click(function() {
    // Increment the array index
    message_index++;
    
    // If there is no more message to display, hide it... Else, disply the message
    (message_index>messages.length-1) ? $(this).hide() : $(this).text(messages[message_index]);
  });
}


popup("Message 1");

popup("Message 2");

popup("Message 3");

popup("Message 4");

popup("Message n");

#popup{
  display: none;
}

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

jQuery-等待元素关闭

2 个答案: