发送ajax请求之前的延迟不起作用

When I do hover over <td> it does wait 900 milliseconds and then sends a lot of requests (I always hover over more tds in these 900ms). What am I doing wrong? why only clearTimeout (commented) works?

当我将鼠标悬停在上时，它会等待900毫秒然后发送大量请求（我总是在这900毫秒内将鼠标悬停在更多的tds上）。我究竟做错了什么？为什么只有clearTimeout（评论）有效？

My point is to wait before hitting server and if user move mouse to another <td> in this running countdown (900ms), previous countdown is aborted and new one takes place

我的观点是在击中服务器之前等待，如果用户在此运行倒计时（900ms）内将鼠标移动到另一个，则先前的倒计时将中止并且会发生新的倒计时

        $(function(){
                var isLoading = false;
                $("td").hover(function(){
                        var x = parseInt(0);
                        var position = $(this).attr('id');
                        clearTimeout(timer);
                        var oID = $(this).attr('id');
                        var oData = $(this);
                        var timer = setTimeout(function(){
                                if (position == oID&&!isLoading)
                                {
                                        clearTimeout(timer);
                                        $.ajax({
                                                beforeSend: function(xhr){ var isLoading = true; },
                                                url: 'ajax.php?what=click&position='+position,
                                                success: function(data){
                                                        $('#hovercard').css(oData.offset());
                                                        $('#hovercard').show();
                                                        $('#hovercard').html(data);
                                                }
                                        });
                                }
                        }, 900);
// this only works ->                                             clearTimeout(timer);
                });
        });

1 个解决方案

#1

You will need to store timer in a scope outside the hover function. I'm not so sure about the scope for isLoading either, so if this doesn't work, try moving isLoading out to the same scope as timer:

您需要将计时器存储在悬停功能之外的范围内。我也不太确定isLoading的范围，所以如果这不起作用，请尝试将isLoading移动到与timer相同的范围：

    var timer;
    $(function(){
            var isLoading = false;
            $("td").hover(function(){
                    var x = parseInt(0);
                    var position = $(this).attr('id');
                    clearTimeout(timer);
                    var oID = $(this).attr('id');
                    var oData = $(this);
                    timer = setTimeout(function(){
                        if (position == oID&&!isLoading)
                        {
                                clearTimeout(timer);
                                $.ajax({
                                        beforeSend: function(xhr){ isLoading = true; },
                                        url: 'ajax.php?what=click&position='+position,
                                        success: function(data){
                                                    $('#hovercard').css(oData.offset());
                                                    $('#hovercard').show();
                                                    $('#hovercard').html(data);
                                        }
                                });
                        }
                   }, 900);
           });
   });

You have some other oddities as well. Note that oID always will be equal to position as they are set at the same time, in the same scope. This makes the first condition in your if statement pointless. I've also removed the var statement in your beforeSend function.

你还有其他一些奇怪的东西。请注意，oID始终等于位置，因为它们在同一范围内同时设置。这使得if语句中的第一个条件毫无意义。我还删除了beforeSend函数中的var语句。