0

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

4

2 回答 2

2

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

使用这个重载：

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

将ajax放在complete函数回调中。

于 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 回答