堆疊充斥

Question

編輯：最初名爲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); 
} 

編輯：把一個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); 
} 

有人可以解釋爲什麼這是？

Answer 1

基本上，在原：

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)前綴事件的setter，提取它並運行this.addEvent('complete', cb);。這不會取代之前的版本，mootools有一個帶有多個回調的事件API，而不是一個靜態的。

解決此問題的一種方法是在調用下一個事件之前先分離事件，但由於事件是相同的，所以這很愚蠢。反之設置補間實例會更有意義。元素不會改變。注意我並不真正知道你是否使用它。似乎有點多餘，但這裏有雲：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等的引用 - 緩存。