prototype PeriodicalExecuter move div effect

Question

요청이 진행되는 동안 div를 이동하려고 시도하면 완료시 div가 원래 위치로 다시 이동합니다. 그러나 각 요청에 대해서만 일어납니다. 여기에 코드

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

당신은 첫 번째 이동이 완료된 후 실행하는 onComplete를 이동을 기대하고있다. Move와 Ajax.Updater가 모두 비동기이기 때문에 이러한 일은 발생하지 않을 것입니다. 해결 방법은 절대 이동으로 전환하고 두 번째 충돌과 충돌하기 전에 원래 이동을 취소하는 것입니다.

$('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);