Prototyp PeriodicalExecuter move div effect

Question

Versuchen Sie, ein Div nach unten zu verschieben, während die Anfrage gemacht wird, dann verschieben Sie das Div wieder in seiner ursprünglichen Position auf vollständig. Aber es kommt nur bei jeder Anfrage auf. Hier ist der Code:

new PeriodicalExecuter(function() { 
    new Effect.Move('content', { 
     x:0, 
     y:15, 
     duration:1 
    });; 
    new Ajax.Updater('content','/getcontent', { 
     asynchronous:true, 
     evalScripts:true, 
     onComplete:function(request, json) { 
      new Effect.Move('content', {x:0,y:-15,duration:1}); 
     }, 
     insertion:Insertion.Top, 
     requestHeaders:['X-Update', 'content'] 
    }) 
}, 5) 

Answer 1

Sie erwarten, dass die onComplete Move ausgeführt wird, nachdem der erste Move abgeschlossen wurde. Dies ist unwahrscheinlich, da sowohl Move als auch Ajax.Updater asynchron sind. Die Lösung besteht darin, auf absolute Moves umzuschalten und den ursprünglichen Move abzubrechen, bevor der zweite Konflikt damit in Konflikt gerät.

$('content').store('originalOffset', $('content').cumulativeOffset()); 

new PeriodicalExecuter(function() { 
    $('content').store(
    'move', 
     new Effect.Move('content', { 
     x:$('content').retrieve('originalOffset').left, 
     y:$('content').retrieve('originalOffset').top + 15, 
     duration:1, 
     mode: 'absolute' 
     }) 
    ); 
    new Ajax.Updater('content','/getcontent', { 
     asynchronous:true, 
     evalScripts:true, 
     onCreate: function() { 
     $('content').retrieve('move').cancel(); 
     }, 
     onComplete:function(request, json) { 
      new Effect.Move(
      'content', { 
       x:$('content').retrieve('originalOffset').left, 
       y:$('content').retrieve('originalOffset').top, 
       duration:1, 
       mode: 'absolute' 
      } 
      ); 
     }, 
     insertion:Insertion.Top, 
     requestHeaders:['X-Update', 'content'] 
    }) 
}, 5);