(JQuery) For 循环不递增答案

【问题标题】：(JQuery) For Loop not Incrementing(JQuery) For 循环不递增
【发布时间】：2014-04-01 12:53:20
【问题描述】：

我对 JQuery 还是很陌生，但这是一个让我很恼火的简单问题。

我正在尝试通过 JavaScript 中的字符串数组淡入/淡出/递增/重复，但 for 循环始终是 4

$(document).ready(function() {
    var words=["Fantastic","Exiting", "Professional", "Life Changing", "Exactly What You Are Looking For..."];
    for(var j = 0; j < words.length; j++){
        $('#word').html(words[j]).fadeOut().delay(1000).fadeIn().delay(1000);
    }
});

我确定这只是一个愚蠢的错误，因为它是我的代码，所以我视而不见，但由于我现在独自一人，有人能帮我说出来吗？

提前干杯。

【问题讨论】：

"for 循环总是正好是 4"... 什么意思？
因为for循环不会等到里面的代码运行完毕。所以你会看到最后一项，因为那是最后运行的东西！
编写一个以j 为输入的函数，该函数执行.html... 之后的位 - 并使用上次延迟的回调来增加j 并再次调用该函数。
for 循环在 html 完成工作之前完成了它的工作
见jsfiddle.net/arunpjohny/R5qsH/3

标签： javascript jquery arrays for-loop

【解决方案1】：

这里的问题是（可能）fadeOut 和 fadeIn 在 async 中执行，所以实际发生的情况是这样的：

你的循环开始了，j == 0。
jQuery 获取#word 元素，并将其内容设置为word[0]
jQuery 在元素上排列四个动画：fadeOut、delay、fadeIn 和 delay。
fadeOut 开始运行
循环继续，因为动画异步运行 - j == 1
同样的事情发生在这里 - jQuery 找到 #word 元素并将其内容设置为 word[1]，然后再次将相同的四个动画排入队列。
fadeOut 仍未完成。如果是，delay(1000) 肯定不是。
接下来的三个循环运行如上，最终在第一个 fadeOut 完成之前将内容设置为 word[4]。
动画事件依次运行，每次元素淡入时将内容显示为word[4]。

您需要使用回调函数来推迟更新元素的内容，直到动画事件完成。

【讨论】：

你一说异步我就知道了。在 6 分钟内，您将有一个漂亮的绿色勾号添加到您的收藏中。干杯队友
@JackPendlebury 很高兴我能帮上忙 =)

【解决方案2】：

这可能会解决您的问题，试一试并告诉我们它是否有效。

$(document).ready(function() {
  var words=["Fantastic","Exiting", "Professional", "Life Changing", "Exactly What You Are Looking For..."];
  for(var j = 0; j < words.length; j++){
    (function (index) {
      $('#word').html(words[index]).fadeOut().delay(1000).fadeIn().delay(1000);
    }(j));
  }
});

【讨论】：

【解决方案3】：

如果我理解正确，您总是会看到最后的字符串淡入/淡出。

这是因为循环不会通过淡入淡出效果延迟下一次迭代。

您需要更改逻辑，以便在淡入淡出效果之前值不会增加，或者不再使用显式循环。

$(document).ready(function() {
    var words=["Fantastic","Exiting", "Professional", "Life Changing", "Exactly What You Are Looking For..."];
    //run against first string in array
    $('#word').html(words[0]).fadeOut(complete).delay(1000).fadeIn().delay(1000);

    //callback function
    function complete() {
        //check which word we're currently on
        var index = words.indexOf($(this).html());

        //if it's not the last word, run the code with the next
        if (index < words.length) {
            $(this).html(words[index+1]).fadeOut(complete).delay(1000).fadeIn().delay(1000);
        }
     }
});

http://jsfiddle.net/S9MQ9/1/

【讨论】：