jQuery中/ CoffeeScript的延迟Ajax调用(Delaying ajax call

这是一些粗糙的JavaScript / jQuery的/ CoffeeScript中，在页面的延迟后，下部的DIV幻灯片。 我在轨工作，所以我也打的是增加了一个特定的幻灯片在数据库视图计数器的端点。

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完成加载计数器。

Answer 1:

我不知道或未使用coffeescript （感谢上帝），但你可以使用动画的回调。

使用此重载 ：

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

把阿贾克斯的complete回调函数。

Answer 2:

另一种回答：jQuery的1.6或更高版本，还有直接通过回调的替代方案：获取一个承诺，并且回调附加到它。 这将使你的代码更清楚地写，就像这样：

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"});

在承诺与它们的优势更多信息，可以在我的书中，找到异步的JavaScript 。

文章来源: Delaying ajax call in jQuery/Coffeescript