在 jQuery/Coffeescript 中延迟 ajax 调用答案

【问题标题】：Delaying ajax call in jQuery/Coffeescript在 jQuery/Coffeescript 中延迟 ajax 调用
【发布时间】：2012-06-04 21:18:35
【问题描述】：

这是一些粗略的 javascript/jquery/coffeescript，延迟后会在页面下部的 DIV 中滑动。我在 Rails 中工作，所以我还遇到了一个端点，该端点会为特定幻灯片增加数据库中的视图计数器。

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

【问题讨论】：

我使用咖啡脚本是因为 Rails 创建咖啡脚本文件并编译它们。
@gdoron 实际上，除了简洁之外，人们使用 CoffeeScript 的原因还有很多。 “一切都是一种表达”的理念、类的语法、简单的“this 保存”等。
另外，它读起来更像 ruby —— Rails 开发人员会熟悉的。

标签： jquery ajax ruby-on-rails-3 coffeescript

【解决方案1】：

我不知道也不用coffeescript（谢天谢地），但是你可以用动画的回调。

使用this overload:

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

将 ajax 放入 complete 函数回调中。

【讨论】：

【解决方案2】：

另一种答案：在 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"});

关于 Promise 及其优势的更多信息可以在我的书中找到，Async JavaScript。

【讨论】：