0

これは、遅れてページ下部の DIV にスライドする大まかな javascript/jquery/coffeescript です。私はレールで作業しているので、特定のスライドのデータベースでビュー カウンターをインクリメントするエンドポイントにも到達しています。

jQuery ->
    $("div[data-slide='true']").delay(20000).animate({opacity: 1,right:'+=350'},1350, 'swing');
    id = $("div[data-slide='true']").data("slide-id")
    $.ajax({url: "http://localhost:3000/firefly/slides/" + id + "/increment", type: "post"});
    $("div[data-close='true']").click ->
        $("div[data-slide='true']").clearQueue().animate({opacity: 0,right:'-=350'},500, 'easeOutBounce');

これが最高の JavaScript ではないことは承知しています。私は本当に JS の初心者ですが、現在の問題は、ajax 呼び出しを遅らせる方法がわからないため、スライドが次の場合にのみエンドポイントに到達することです。現時点では、DOM の読み込みが完了するとエンドポイントに到達し、カウンターがインクリメントされます。

4

2 に答える 2

2

私は知らないか使用していませんがcoffeescript（神に感謝します）、アニメーションのコールバックを使用できます。

このオーバーロードを使用します:

.animate( properties [, duration] [, easing] [, complete]

complete関数コールバックに ajax を入れます。

于 2012-05-30T15:46:18.977 に答える
1

別の答え: jQuery 1.6+ では、コールバックを直接渡す代わりの方法があります: Promise を取得し、それにコールバックをアタッチします。これにより、次のようにコードをより明確に記述できるようになります。

var swinging = $("div[data-slide='true']")
               .delay(20000)
               .animate({opacity: 1,right:'+=350'},1350, 'swing')
               .promise();
$("div[data-close='true']").click ->
    $("div[data-slide='true']").clearQueue()
                               .animate({opacity: 0,right:'-=350'},500, 'easeOutBounce');
swinging.done ->
    id = $("div[data-slide='true']").data("slide-id")
    $.ajax({url: "http://localhost:3000/firefly/slides/" + id + "/increment", type: "post"});

Promises とその利点の詳細については、私の著書Async JavaScriptを参照してください。

于 2012-05-30T19:26:48.443 に答える