简单的 jQuery 函数只在 for 循环后返回零答案

【问题标题】：Simple jQuery function only returns a zero after for loop简单的 jQuery 函数只在 for 循环后返回零
【发布时间】：2015-04-15 15:43:14
【问题描述】：

我有一个 jQuery 函数，我试图用它来最终使一些文本闪烁：

function blink() {

            var blinks = 7;
            blinks = blinks * 2; // Multiply by 2 to get an even number.
            var vis;

            for (i = 0; i < blinks; i++) {
                if (vis == 1) {
                    setTimeout(function () {

                        $("#ticker").animate({
                            opacity: 0
                        }, 0);
                        vis = 0;
                        alert(vis);

                    }, 500);
                } else {
                    //setTimeout(function () {

                    $("#ticker").animate({
                        opacity: 1
                    }, 0);
                    vis = 1;
                    alert("vis= " + vis);

                    //}, 500);
                }
            }

        }

不过，我现在只是想让它返回正确的数字（1 或 0），具体取决于文本是否可见。如果文本已经打开，则该函数将其关闭一次，但随后它保持关闭状态，即使我正在重置“vis”变量以指示文本是否可见。但是，在 for 循环的第二次迭代之后，它只会为 vis 变量返回零。我不确定是什么原因造成的。有谁知道我在这里做错了什么？我已经坚持了好几个小时，所以您能给我的任何帮助将不胜感激。

【问题讨论】：

您正在同时启动多个异步操作。循环立即结束，但超时发生在稍后。
您的 for 循环将在 setTimeout 中的匿名函数运行时完成。
那么我应该以某种方式将 setTimeout 包裹在 for 循环中吗？
作为设计准则，闪烁文本（顺便说一句，在原始 HTML 浏览器中）是一个很大的禁忌 :)
这是大量的代码来简单地闪烁一些文本。您是否有 HTML 示例，以便我们制作一个不错的演示？

标签： javascript jquery function variables for-loop

【解决方案1】：

您正在同时启动多个异步操作所有操作。循环立即结束，但超时发生在稍后。

您可以使用无限计时器来更简单地完成此操作，该计时器会停止并使用fadeToggle() 淡入/淡出。

var count = 14;
var int = setInterval(function(){
    if (--count < 0){
        clearInterval(int);
    }
    $('#text').fadeToggle();
}, 500);

JSFiddle： http://jsfiddle.net/TrueBlueAussie/ev3b0das/

您可以使用数字和其他选项来尝试不同的效果（文本的初始隐藏等）

如果您不想淡入/淡出，请使用toggle:

http://jsfiddle.net/TrueBlueAussie/ev3b0das/1/

如果您希望文本在末尾可见，请将计数设为奇数：

http://jsfiddle.net/TrueBlueAussie/ev3b0das/2/

【讨论】：

【解决方案2】：

我不确定我是否正确地理解了你，但如果我理解了，这将是我的解决方案：

function blink(jquery_element, times) {
  if(times == 0) {
    return true;
  }
  // Toggle visibily once for hiding
  jquery_element.toggle(250, function() {
    // Toggle visibily again for showing
    jquery_element.toggle(250, function() {
      blink(jquery_element, --times);
    });
  });
  return true;
}

这是一个递归函数，它可以使 jquery 元素可见并隐藏它指定的多次，可以这样使用：

blink($("#ticker"), 7);

【讨论】：

【解决方案3】：

对于调试，请使用控制台，而不是 alert。要显示控制台（Chrome、Firefox）：CTRL + MAJ + I。您的困惑在于同步处理与异步处理。

为了理解，尝试执行这个错误代码然后查看控制台：

function blink() {
    for (i = 0; i < 7; ++i) {
        console.log('in the loop, i = ' + i);
        setTimeout(function () {
            console.log('after timeout, i = ' + i);
        }, 500);
    }
}

一种解决方案是递归调用您的函数：

function blink(index) {
    if (index === undefined)
        index = 0;
    console.log('index = ' + index + ' ');
    if (index <= 6) {
        setTimeout(function () {
            blink(index + 1);
        }, 500);
    }
}

【讨论】：

你是不是错过了什么？

【解决方案4】：

我不会直接回答你的问题。无论如何，我想分享一个我前段时间创建闪烁效果的方法（使用jQuery），我认为你可以利用它：

/**
  * @param {HTMLElement} $element
  * @param {Number} times Number of fade in/out times
  * @param {Number} [duration] Time of transitions in ms
  * @param {Function} [callback] Callback function to call after transitions
  */
var FadeEffect = function ($element, times, duration, callback) {
    if (typeof duration === "function") {
        callback = duration;
        duration = null;
    }
    else duration = duration || 250;
    for (var i = 0; i < times; i++) {
        if (i === times - 1) $element.fadeOut(duration).fadeIn(duration, callback);
        else $element.fadeOut(duration).fadeIn(duration);
    }
};

现在，如果您愿意，可以根据您的要求对其进行改进。使用这个简单的代码，您可以解决循环和异步问题。

编辑： Here is a jsFiddle

【讨论】：