Javascript 简单jQuery函数只在for循环后返回零

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

        }

函数闪烁（）{
var闪烁=7；
闪烁=闪烁*2；//乘以2得到偶数。
var-vis；
用于（i=0；i<闪烁；i++）{
如果（vis==1）{
setTimeout（函数（）{
$（“#ticker”）。设置动画({
不透明度：0
}, 0);
vis=0；
警惕（vis）；
}, 500);
}否则{
//setTimeout（函数（）{
$（“#ticker”）。设置动画({
不透明度：1
}, 0);
vis=1；
警报（“vis=”+vis）；
//}, 500);
}
}
}

---

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

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

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元素可见并隐藏指定次数的jquery元素，如下所示：

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

---

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

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元素可见并隐藏指定次数的jquery元素，如下所示：

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

---

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

使用一个停止的无限定时器，并使用

fadeToggle（）

进行fadein/out操作，可以使操作简单得多

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

var计数=14；
var int=setInterval（函数（）{
如果（--计数<0）{
清除间隔（int）；
}
$（'#text'）.fadeToggle（）；
}, 500);

JSFiddle:

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

如果不希望淡入/淡出，请使用

切换

：

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

---

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

使用一个停止的无限定时器，并使用

fadeToggle（）

进行fadein/out操作，可以使操作简单得多

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

var计数=14；
var int=setInterval（函数（）{
如果（--计数<0）{
清除间隔（int）；
}
$（'#text'）.fadeToggle（）；
}, 500);

JSFiddle:

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

如果不希望淡入/淡出，请使用

切换

：

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

---

我不会直接回答你的问题。无论如何，我想与大家分享我不久前创建闪烁效果（使用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);
    }
};

/**
*@param{HTMLElement}$element
*@param{Number}乘以淡入/淡出次数
*@param{Number}[duration]转换时间（毫秒）
*@param{Function}[callback]转换后要调用的回调函数
*/
var FadeEffect=函数（$element、times、duration、callback）{
if（持续时间类型==“函数”）{
回调=持续时间；
持续时间=空；
}
否则持续时间=持续时间| | 250；
对于（变量i=0；i<次；i++）{
if（i==times-1）$element.fadeOut（持续时间）.fadeIn（持续时间，回调）；
else$element.fadeOut（持续时间）.fadeIn（持续时间）；
}
};

现在，如果你愿意，你可以把它改进到你的要求。通过这段简单的代码，您可以解决循环和异步问题

---

编辑：

我不会直接回答你的问题。无论如何，我想与大家分享我不久前创建闪烁效果（使用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);
    }
};

/**
*@param{HTMLElement}$element
*@param{Number}乘以淡入/淡出次数
*@param{Number}[duration]转换时间（毫秒）
*@param{Function}[callback]转换后要调用的回调函数
*/
var FadeEffect=函数（$element、times、duration、callback）{
if（持续时间类型==“函数”）{
回调=持续时间；
持续时间=空；
}
否则持续时间=持续时间| | 250；
对于（变量i=0；i<次；i++）{
if（i==times-1）$element.fadeOut（持续时间）.fadeIn（持续时间，回调）；
else$element.fadeOut（持续时间）.fadeIn（持续时间）；
}
};

现在，如果你愿意，你可以把它改进到你的要求。通过这段简单的代码，您可以解决循环和异步问题

---

编辑：

要进行调试，请使用控制台，而不是

警报

。要显示控制台（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);
    }
}

函数闪烁（）{
对于（i=0；i<7；++i）{
log（'在循环中，i='+i）；
setTimeout（函数（）{
log（'超时后，i='+i）；
}, 500);
}
}

一种解决方案是递归地调用y