在jQuery/Coffeescript中延遲ajax調用

這是一些粗略的javascript/jquery/coffeescript，延遲後會在頁面下部的DIV中滑動。我正在使用rails，所以我還打了一個端點，用於爲特定幻燈片增加數據庫中的查看計數器。在jQuery/Coffeescript中延遲ajax調用

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完成加載時遞增計數器。

來源

2012-05-30 Slick23

我使用咖啡腳本，因爲Rails創建咖啡腳本文件並編譯它們。 – Slick23

@gdoron實際上，除了簡潔之外，人們使用CoffeeScript的原因有很多。 '一切都是表達'的哲學，類的語法，簡單的「'這個'保存」等等。 – epidemian

另外，它更像ruby - 這是rails開發人員熟悉的。 – Slick23

我不知道或使用coffeescript（感謝上帝），但你可以使用動畫的回調。

使用this overload：

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

把AJAX在complete回調函數。

來源

2012-05-30 15:46:18 gdoron

一個替代的答案：在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"});

更多信息可以在我的書中找到，Async JavaScript。

來源

2012-05-30 19:26:48

在jQuery/Coffeescript中延遲ajax調用

回答

相關問題