Мигающий объект управления в jQuery - PullRequest
Новая
       6

Мигающий объект управления в jQuery

1 голос
/ 11 августа 2011

Я пытаюсь заставить объект начинать / останавливать мигание (с помощью fadeIn () и fadeOut () для объекта в jquery. У меня уже есть метод blink (), который заставляет элемент мигать один раз, и он работает,но я пытаюсь заставить его мигать снова как обратный вызов 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();
    }

(я знаю, что мои заявки () - беспорядок, извините)

Ответы [ 2 ]

0 голосов
/ 11 августа 2011

это то, что я когда-то делал для подобных вещей: 

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);
}
0 голосов
/ 11 августа 2011

Вы создали явную бесконечную рекурсию.Вы звоните blink, который звонит fadeOut, который звонит 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();});
...