Question

我有一个AJAX电话，如果我已经超过某个元素2秒钟并且没有拨打电话，我只能做什么。我尝试过使用setTimeout，但无论如何都要拨打电话。我怎样才能做到这一点？

这是我的代码：

$('tr').mouseenter(function(){

    $( this ).next("#ticket_summary").show();
    var context = $( this ).next("#ticket_summary");
    var ticket_id = $( this ).next("#ticket_summary").data("id");
    var url = "/support/ticket_description/" + ticket_id.toString();
    console.log(url);
    setTimeout(function(){
    $.ajax({
        url: url,
        type: "GET",
        dataType: "json",
        success: function(data) {
            context.find('#ticket_summary_description').html(data[1]['fields']['text']);
            context.find('#ticket_summary_last_comment').html(data[2]['fields']['text']);
        },
        error: function(data) {
            context.find('#ticket_summary_description').html('error');
            context.find('#ticket_summary_last_comment').html('error');
        }
    });
    }, 2000);
});

Answer 1

如果用户离开，你必须用clearTimeout取消超时。

Demo Fiddle

要检测用户“取消悬停”的时间，请使用：mouseleave
仅在我们使用one
要取消超时使用：clearTimeout

代码应该是这样的：

$('.the-element').on('mouseenter', function (e) {
     var timeout = setTimeout(function () { ... }, 2000 );
     $(e.target).one('mouseleave', function () {
         clearTimeout(timeout)'
     });
});

Answer 2

我认为这会奏效。

<强> HTML：

<a id='test'>LINK</a>

<强> JavaScript的：

$("#test").mouseenter(function(){
    setTimeout(function(){
        $.ajax({
            url:"test.php",
            success:function(){
                alert("success");
            },
            error:function(){
                alert("ERROR");
            }
        });
    },5000);
});

<强>的jsfiddle：

jsFiddle

如果鼠标悬停2秒，则仅进行AJAX调用

2 个答案: