简单 jQuery 仅函数 returns for 循环后的零

Question

我有一个 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);
                }
            }

        }

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

Answer 1

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

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

Answer 2

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

您可以使用停止的无限计时器并使用 fadeToggle() 到 fadein/out。

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

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

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

如果你不想褪色 in/out 使用 toggle:

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

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

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

Answer 3

我不会直接回答你的问题。不管怎样，我想分享一个我前段时间制作的创建闪烁效果的方法（使用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

Answer 4

要进行调试，请使用控制台，而不是 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);
    }
}

简单 jQuery 仅函数 returns for 循环后的零

Simple jQuery function only returns a zero after for loop

javascript

variables

jquery

for-loop

function