Question

如果我写html：

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h1 id="message">
</h1>

和JS：

messages = ["Here", "are", "some", "messages."]

$(function() {

  for (var i = 0; i < messages.length; i++) {
    $('#message').html(messages[i]).delay(1000);
  }

});

并加载页面，我希望看到数组中的每个字符串都显示出介于两者之间的延迟。但是，我所看到的只是＆＃34;消息。＆＃34;出现。似乎for循环在执行任何延迟之前立即遍历数组中的每个值。

我已经看到了获得所需视觉效果的另一种方法（How can I change text after time using jQuery?），但我想知道为什么早期的方法不起作用。执行此代码时会发生什么？

Answer 1

这就是我推迟改变信息的方式。

＆＃13;

imageButton.setOnAction(new EventHandler<ActionEvent>() {
    @Override public void handle(ActionEvent e) {
        System.out.println("Changing the color of the button's border :");
        imageButton.setStyle("-fx-border-color:blue;");
        System.out.println("For further reference, you can save the button or the image in a TreeSet:");
        treeSet.add(imageButton);
    }
});

＆＃13;

function delayLoop(delay, messages) {
  var time = 100;

  $(messages).each(function(k, $this) {
      setTimeout(function()
      {
          $("#message").html($this); 
      }, time)
      time += delay;
  });
}
delayLoop(1000, ["Here", "are", "some", "messages."]);

＆＃13;

我所做的只是延迟了一段延迟时间。它在异步模式下工作，因此它不会阻塞，并且消息会一个接一个地显示。

编辑：

从.html中删除.delay是多余的。

Answer 2

请注意，jQuery＆＃39; s f = "abcdefRevenueData12-2015.xlsx" 'For demonstration purposes If Mid(f, InStr(f, "RevenueData") + 12, 1) = "-" Then Range("X2").Value = CInt(Mid(f, InStr(f, "RevenueData") + 11, 1)) ElseIf Mid(f, InStr(f, "RevenueData") + 13, 1) = "-" Then Range("X2").Value = CInt(Mid(f, InStr(f, "RevenueData") + 11, 2)) Else MsgBox "Unrecognised filename - " & f End End If专门用于效果;像delay这样的方法不使用效果队列，因此不受html的影响。

使用JavaScript的本地setTimeout功能可以更好地解决这个问题。有很多方法可以做到这一点;事实上，你甚至不需要jQuery！

＆＃13;

delay

＆＃13;

let messages = ["Here", "are", "some", "messages."];
let delay = 1000;
let header = document.getElementById("message");

messages.forEach(function(message, i) {
  setTimeout(function() {
    header.innerText = message;
  }, delay * i);
});

＆＃13;

Answer 3

你需要的东西是

$(function() {
  for (var i = 0; i < messages.length) {
    var done=false;
    $('#message').html(messages[i]).delay(1000).queue(function(){
     done=true;
     $(this).dequeue();
    });
     if(done==true){ 
      i++;
     }
   }
});

Answer 4

感谢您的回答和评论 - 非常有帮助。

我也发现这篇文章有用：Node.js synchronous loop，并且从中写了这个（也可以）：

function changeText() {
    var msg = messages.shift();
  $('#message').html(msg).show(0).delay(1000).hide(0, function() {
    if (messages.length > 0) {
        changeText();
    }
  });
}

（我使用.show和.hide因为没有它们只出现了一个数组值。我不知道为什么会这样，但这是另一个问题。）

jQuery通过迭代数组来改变html文本

4 个答案: