javascript - 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();});