我的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>


用户将单击“ Pick”链接或调用jQuery AJAX get的删除图像。

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

jQuery版本:1.4.2
jqueryui版本:1.7.2

最佳答案

也许stop()不能清除delay()-您是否尝试过.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);

10-05 20:54
查看更多