Question

这是一些粗略的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完成加载时，它会到达终点并递增计数器。

Answer 1

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

使用this overload：

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

将ajax放入complete函数回调。

Answer 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 。

在jQuery / Coffeescript中延迟ajax调用

2 个答案: