2013-06-26 2 views
2

EDIT: Первоначально названный Mootools' индекс нижестоящего обновитьштабелирования подростков

Это немного трудно для меня, чтобы действительно быть 100% уверены, что на самом деле происходит под Mootools' капот, но вот как это кажется работать:

когда элемент отсоединяется от DOM, а затем повторно в нижней части это контейнер, кажется, что следующий возвращающийся getNext() или getChildren()[0] или подобное не возвращает элемент думает человек является первой, когда он смотрит в HTML.

Ниже приведен код того, что я хочу сделать. Я в недоумении, и я даже не уверен, что то, что я описал выше, действительно является проблемой.

function slideNext() { 
    window.clearTimeout(sliderTimeout); 
    var slider = $('slider'); 
    slider.set('tween', {duration: 500, onComplete: function(){ 
     var slide = slider.getFirst('.block').clone(); 
     slider.grab(slide, 'bottom'); 
     slider.getFirst('.block').destroy(); 
     slider.erase('style'); 
     sliderTimeout = window.setTimeout(function(){slideNext();}, 5000); 
    }}); 
    slider.tween('margin-left', 0 - slider.getSize().x); 
} 

EDIT: Положив alert(slide.get('html')); внутри OnComplete функции очищает некоторые вещи. Каждый раз, когда функция запускается, количество диалогов предупреждений довольно странно увеличивается, хотя он должен оповещаться только один раз. Похоже, что с помощью slider.set('tween', {blabla}) периодически возникает укладка, которая заставляла меня думать, что может быть что-то не так с детской индексацией, когда, по-видимому, это не так. Этот вариант отлично работает:

function slideNext() { 
    window.clearTimeout(sliderTimeout); 
    var slider = $('slider'); 
    var myFx = new Fx.Tween('slider', { 
     duration: 500, 
     property: 'margin-left', 
     onComplete: function(){ 
      var slide = slider.getFirst('.block').clone(); 
      slider.grab(slide, 'bottom'); 
      slider.getFirst('.block').destroy(); 
      slider.erase('style'); 
      sliderTimeout = window.setTimeout(function(){slideNext();}, 5000); 
     } 
    }); 
    myFx.start(0, 0 - slider.getSize().x); 
} 

Может кто-нибудь объяснить, почему это так?

ответ

0

в основном, в оригинале:

slider.set('tween', {duration: 500, onComplete: function(){ 
    var slide = slider.getFirst('.block').clone(); 
    slider.grab(slide, 'bottom'); 
    slider.getFirst('.block').destroy(); 
    slider.erase('style'); 
    sliderTimeout = window.setTimeout(function(){slideNext();}, 5000); 
}}); 

вы звоните сеттер на wteen инстанции, который обнаруживает событие префиксом on-(Complete), извлекает его и запускает this.addEvent('complete', cb);. это не заменяет предыдущий, mootools имеет событие api с несколькими обратными вызовами, а не одно статическое.

Один из способов решить это - отсоединить событие до вызова следующего, но это глупо, поскольку событие одно и то же. более разумно установить экземпляр tween один раз. элемент не изменится. Заметьте, я действительно не знаю, для чего вы его используете. кажется немного излишним, но здесь идет: http://jsfiddle.net/dimitar/3qWX7/

(function(){ 
    // set the slider el cached, store the tween instance. 
    var slider = document.id('slider').set('tween', { 
     duration: 500, 
     link: 'cancel', 
     onComplete: function(){ 
      var block = this.element.getFirst('.block'); 
      // this.element === slider 
      this.element.adopt(block.clone()); 
      block.destroy(); 
      this.element.erase('style'); // er? why... 
      // console.log(this.element); 
      this.timer = slideNext.delay(5000, this); 
     } 
    }); 

    // you can get instance by doing: 
    slider.get('tween'); // Fx.Tween instance 

    function slideNext(){ 
     // this == Fx.Tween instance. 
     window.clearTimeout(this.timer); 
     this.element.tween('margin-left', [0, this.element.getSize().x]); 
    } 

    slider.tween('margin-left', 40); 
}()); 

Недостатком является то, другие подростки - это событие не связано с недвижимостью, которую подростковый. если вы это сделаете, вам придется использовать fx.morph и удалять/добавлять события по мере продвижения.

tl; dr ;: всегда повторно использовать экземпляры fx, ссылки на dom и т. Д. - кэшируются.