Question

我有这段代码会导致弹出窗口出现，然后关闭并重新出现。我需要尝试在每个弹出的消息之间设置随机延迟。所以这将是一个弹出消息，然后是我可以设置时间的延迟，然后是下一个弹出消息，然后是延迟，然后是下一个弹出窗口，并继续我需要许多弹出窗口。代码的两部分如下所示……

function showPopup(options) {
  var messages_array = options.messageText;
  var no_of_messages = messages_array.length;
  var pop_up_height = 400;
  var showDuration = 12000;
  var duration = 12000;
  var startInterval;
  var popupPosition = options.position;
  var popupCSS = "";
  if (popupPosition == "topleft") {
    popupCSS = "position:fixed;top:0;left:0;margin:0 auto;";
  }
  if (popupPosition == "topcenter") {
    popupCSS = "position:fixed;top:0;left:50%;margin:0 auto;";
  }
  if (popupPosition == "topright") {
    popupCSS = "position:fixed;top:0;right:0;margin:0 auto;";
  }
  if (popupPosition == "middleleft") {
    popupCSS = "position:fixed;top:50%;left:0;margin:0 auto;";
  }
  if (popupPosition == "middlecenter") {
    popupCSS = "position:fixed;top:50%;left:50%;margin:0 auto;";
  }
  if (popupPosition == "middleright") {
    popupCSS = "position:fixed;top:50%;right:0;margin:0 auto;";
  }
  if (popupPosition == "bottomleft") {
    popupCSS = "position:fixed;bottom:0;left:0;margin:0 auto;";
  }
  if (popupPosition == "bottomcenter") {
    popupCSS = "position:fixed;bottom:0;left:50%;margin:0 auto;";
  }
  if (popupPosition == "bottomright") {
    popupCSS = "position:fixed;bottom:0;right:0;margin:0 auto;";
  }

  var html_snippet = "<div id='popup' style='" + popupCSS + "'><div id='close' style='height:20px;width:100%;cursor:pointer;display:none;'><span style='color:#fff;float:right;top:0px;'>X</span></div>";
  jQuery("body").append(html_snippet);
  if (options.height) {
    pop_up_height = options.height;
    jQuery("#popup").css("height", options.height);
  }
  if (options.width) {
    jQuery("#popup").css("width", options.width);
  }
  if (options.showDuration) {
    showDuration = options.showDuration;
  }
  if (options.imageUrl) {
    jQuery("#popup").css("background-image", "url(" + options.imageUrl + ")");
  }
  if (options.messageText) {
    jQuery("#popup").append("<p style='margin:0 auto;text-align:center;paddin:10px;color:white;'></p>");
  }
  if (options.duration) {
    duration = options.duration;
  }
  $("#popup").hide();
  startInterval = setInterval(function() {
    jQuery("#popup >p").text(messages_array[[Math.floor(Math.random() * messages_array.length)]].Message);
    $("#close").css("display", "block");
    $("#popup").show();
    setTimeout(function() {
      jQuery("#popup>p").text('');
      $("#popup").hide();
    }, showDuration);
  }, duration);
  $("#close").click(function() {
    clearInterval(startInterval);
  });
}



jQuery(document).ready(function() {
  showPopup({
    height: 200, // height of popup
    width: 400, // width of popup
    imageUrl: "", // background image path for popup
    messageText: [{
      "Message": "message goes here"
    }, {
      "Message": "the next message goes here"
    }, {
      "Message": "another message"
    }], //  messages text shownon pop up 
    duration: 5000, // duration for next popup
    position: "middlecenter", // position for popup (topleft,topcenter,topright,middleleft,middlecenter,middleright,bottomleft,bottomcenter,bottomright;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>popup script</title>
</head>

<body>
  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</body>

</html>

Answer 1

您显然需要放弃setInterval，因为这显然会导致间隔相同的时间。而是使用setTimeout并将其包装在您通过嵌套setTimeout再次调用的函数中。

以下是代码的setInterval部分的替换方式：

var startInterval;
var i = 0;
(function loop() {
    $("#popup >p").text(messages_array[i].Message);
    i = (i + 1) % messages_array.length; // next index ...
    $("#close").css("display", "block");
    $("#popup").show();
    startInterval = setTimeout(function() {
        $("#popup>p").text('');
        $("#popup").hide();
        startInterval = setTimeout(loop, duration * (Math.random() * 1.5 + 0.5));
    }, showDuration);
})();

现在将弹出窗口之间的实际暂停时间设置为duration/2和duration*2之间的随机持续时间。这样您仍然可以影响它。

关于其余代码：尽量避免应用内联样式。而是定义CSS类并分配它们。

注意：如评论中所述，消息的顺序不再是随机的。

将延迟持续时间变量添加到弹出Javascript

1 个答案: