Question

我正在使用SignalR根据服务器上发生的操作实时更新我的网络应用程序。现在，每当记录保存在数据库中时，我都会递增一个计数器。我希望持有计数器数量的范围淡出，更改，然后淡入。这里唯一的问题是该方法可以在完成淡出所需的时间内多次调用。我目前的代码看起来像这样。

var todaysRequests = "";

var todayElement = $('#todays-requests');

//check if element is currently being animated, if so, just change the span text. If not then 
//initiate the animation then change the span text
if ($(todayElement).is(':animated')) {
    todaysRequests = parseInt($('#todays-requests').text());
    todaysRequests++;
    $(todayElement).text(todaysRequests.toString());
} else {
    $(todayElement).fadeOut(300, function () {
        //at this point its possible another call was made to this method and the counter was 
        //incremented. We need to get the counter number again just incase it has been incremented
        //then we can actually increment it.
        todaysRequests = parseInt($('#todays-requests').text());
        todaysRequests++;
        $(todayElement).text(todaysRequests.toString());
        $(todayElement).fadeIn(300);
    });
}

问题是没有办法在调用上述函数之间保留数据。我想过使用本地存储来存储一个整数，每当这个函数运行时，该变量都会增加，同时仍然可以设置动画，然后在动画结束时检查本地存储并调整计数器。这可能有效，但似乎工作太多了。必须有一个更优雅的解决方案。现在它看起来并不那么糟糕，但是如果对函数进行多次调用，你可以看到跨度在渐渐消失时递增。

更新
检查jquery.queue（）。看起来你可以将函数的que函数转换为在其他事情发生后调用的元素。我不是100％确定如何对它们进行排队，然后在动画完成后才执行它们。

Answer 1

尝试

var todayElement = $("#todays-requests")
, data = 0;

$.when(todayElement.queue("fx", function () {
    todayElement.fadeOut(300, function () {
        todayElement.text(data)
    }).fadeIn(300)
}).dequeue("fx"))        
    .promise("fx", todayElement)
    .done(function (el) {
    console.log(data + " tasks complete"
                , "queue length: " + el.queue("fx").length)
})

＆＃13;

var todayElement = $("#todays-requests"),
    data = 0;

var request = function (d, t) {
    setTimeout(function () {
        $.get("https://gist.githubusercontent.com/anonymous/ca95080f6d3a7b32bb95/raw/120dec0dce825193b0551ad1fbda4b71029b336d/js.js")
            .done(function (n) {
            ++data
        })
    }, t)
};

for (var i = 0; i < 100; ++i) {
    request(i, i * 275)
}

$(document).on("ajaxStop", function (e) {
    $.when(todayElement.queue("fx", function () {
        todayElement.fadeOut(300, function () {
            todayElement.text(data)
        }).fadeIn(300)
    }).dequeue("fx"))        
        .promise("fx", todayElement)
        .done(function (el) {
        console.log(data + " tasks complete"
                    , "queue length: " + el.queue("fx").length)
    })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="todays-requests"></div>

＆＃13;

Que函数在动画完成后执行

1 个答案: