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

您希望在第一个Move完成后执行onComplete Move。这不太可能发生，因为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);

原型PeriodicalExecuter移动div效果

1 个答案: