jQuery 中的闪烁控制对象

Question

我正在尝试使一个对象开始/停止闪烁（使用 jquery 中的对象的 fadeIn() 和 fadeOut() ）。 我已经有一个方法眨眼（），使元素闪烁一次，并且它有效，但我试图让它再次闪烁，作为对 fadeOut（） 的回调，并且似乎无法在没有得到堆栈溢出。这是我到目前为止所得到的：（

     Indicator = function(str) {
        this.el= $(str);    
        this.blink = function(){ 
            var callback = function() { 
                                return function(){
                                    console.log(this.el)
                                    this.blink();
                                }.apply(this);
                                //if (!this.stopped)
                                    //this.blink();
                            }.apply(this);


            this.el.fadeIn(200).delay(200).fadeOut(200,callback);
            }
            this.stopped = false;
            this.stop = function() { this.stopped = true; }
    }

    function start(){
       indicator =new Indicator('#indicator p');
       indicator.blink();
    }

我知道我的 apply() 是一团糟，抱歉）

Answer 1

您已经创建了显式的无限递归。您正在调用 blink，它又调用 fadeOut，后者又调用 callback，而 callback 又调用 blink。我建议你用 setInterval 重写这个函数，比如：

this.fadeDuration = 200;
this.blinkIntervalRef = null;
this.blink = function(){
    this.blinkIntervalRef = setInterval(
         function(){this.doBlink();},
         this.fadeDuration*3
    );
}
this.stop = function() {clearInterval(this.blinkIntervalRef );}
this.doBlink = function(){
    //this is just shortcut, not to make horizontal scroll
    var interval = this.blinkIntervalRef; 
    this.el.fadeIn(interval).delay(interval).fadeOut(interval);
}

请注意，它没有经过测试，但至少它会给你一个方向。

更新：这是工作示例，但需要一些调试和时间跨度调整：

Indicator = function(str) {
    this.el= $(str);    
    this.fadeDuration = 100;
    this.blinkIntervalRef = null;
    this.doBlink = function(){
        //this is just shortcut, not to make horizontal scroll
        var interval = this.blinkIntervalRef; 
        this.el.fadeIn(interval).delay(interval).fadeOut(interval);
    }
    this.blink = function(){
        var ctx = this;
        this.blinkIntervalRef = setInterval(function(){ctx.doBlink();},this.fadeDuration*4);
    }
    this.stop = function() {clearInterval(this.blinkIntervalRef);}
}

function start(){
   indicator = new Indicator('#indicator p');
   indicator.blink();
}

$(document).ready(function(){start();});

Answer 2

这就是我曾经做过类似的事情：

function initializeBlink()
{      
        $('#indicator p').fadeToggle('slow', fadeToggleBlinker);
}

function fadeToggleBlinker()
{      
        var timeout = 2000;
        if(this.style.display == 'none')
                timeout = 1000;
        var tmp = $(this);
        window.setTimeout(function(){tmp.fadeToggle('slow', fadeToggleBlinker)}, timeout);
}