Question

我的JavaScript如下：

$.get("/<page>.php", "userid='.$userid.'&"+status, function(data){
        $("#status").show("fast").html(data).delay(4000).hide("fast");
    });

我在页面上有很多链接会加载这个jQuery AJAX并正确显示div中的状态。一切正常，除非用户非常快速地点击许多链接。数据更改正确，但动画延迟。我已尝试在stop()之前加入jQuery stop(true)和stop(true, true)以及.show，但它似乎没什么帮助。动画可以在最后一次点击后持续很长时间;例如，如果用户单击20次，然后暂停，则隐藏动画似乎会在很长时间后继续，尽管stop（）。我想要的是如果用户点击导致AJAX导致状态显示的另一个链接，基本上“重置”状态动画。

有什么想法吗？

以下是完整的相关JavaScript：

    <script type="text/javascript">
    ...
        $(document).ready(function () {
            $("#entry a.styled").live("click", function(event){
        var status = $(this).attr("rel")+"&game="+$(this).attr("name");
        var teamid = $(this).attr("rel");       
        var gameid = $(this).attr("name");
        $("[name="+gameid+"]").show(1);
        $(this).hide(1);
        $("[rel=t"+teamid.replace("pick=", "")+"]").removeClass();
        $("[name=t"+gameid+"]").removeClass();
        $("#t"+teamid.replace("pick=", "")).addClass("hilite");
        $.get("/<filename>.php", "userid=1&"+status, function(data){
            $("#status").stop(true, true).show("fast").html(data).delay(4000).hide("fast");
        });
    });
    </script>

和一些相关的HTML，这是在一个更大的表格中：

    <tr class="row-a"> 
    <td>8-man</td> 
    <td>1:00 pm</td> 
    <td class="hilite" id="t298" rel="t233" name="t3235"><a href="/team/la_veta/2010/">La Veta</a></td> 
    <td><a href="#" style="display:none" name="3235" class="styled" rel="pick=298">Pick</a></td> 
    <td><a href="#" name="3235" class="styled" rel="delete=3235"><img src="/images/delete.png" height="12" width="12" /></a></td> 
    <td><a href="#" name="3235" class="styled" rel="pick=233">Pick</a></td> 
    <td id="t233" rel="t298" name="t3235"><a href="/team/south_park/2010/">South Park**</a></td> 
    <td>&nbsp;</td> 
</tr>

用户可以点击“选择”链接或删除调用jQuery AJAX get的图像。

我的（有限显示）代码的任何其他改进也受到赞赏。

jquery版本：1.4.2 jqueryui版本：1.7.2

Answer 1

也许stop（）不会清除延迟（） - 您是否尝试过.clearQueue()方法？

或者，您可以尝试使用setTimeout而不是delay（）...

// animInProgress and animDelay are global variabes
var animInProgress = false;
var animDelay;

//later, in your $.get success function...
$("#status").show("fast").html(data);
if(animInProgress) {
    clearTimeout(animDelay);
}
animInProgress = true;
animDelay = setTimeout(function() {
    $("#status").hide("fast");
    animInProgress = false;
}, 4000);

停止jQuery动画

1 个答案: