jquery - 如何停止我的 DIV 上的鼠标悬停功能，使其不会像无限的 while 循环那样继续？

Question

我有一个 div，当单击它时，它会从服务器获取一些信息并将主题放入自身内容以向用户显示它工作正常，但是当它完成工作并且如果用户在此 div 上按住鼠标，则会再次开始加载数据并且这项工作像k无限循环一样继续进行，如果用户在其上按住鼠标，当完成的工作不会再次开始工作时，我该如何处理它？

 <div id="picdiv" onmouseover="getit(this,'123')" onmouseout="killit(this)"></div>

我的代码：

var xhr;

function getit(picdiv, pid) {

  $('#picdiv').html('please wait...');

 xhr= $.ajax({
    url: "/Getcontent",
    type: 'POST',
    dataType: 'json',
    data: null,
    contentType: 'application/json; charset=utf-8',
    success: function (content) {
        $('#picdiv').html(content);

    },
    error: function (content) {
       //do something
    }
   });
}

  function killit() {
  xhr.abort()
 }

Answer 1

您可以简单地将 if 条件放入您的代码中

    var xhr;
    var hasCompleted = false;

    function getit(picdiv, pid) {


if (!hasCompleted)
{
      $('#picdiv').html('please wait...');

     xhr= $.ajax({
        url: "/Getcontent",
        type: 'POST',
        dataType: 'json',
        data: null,
        contentType: 'application/json; charset=utf-8',
        success: function (content) {
            hasCompleted = true
            $('#picdiv').html(content);

        },
        error: function (content) {
           //do something
        }
       });
    }
}

  function killit() {
  xhr.abort()
 }

Answer 2

更好地绑定你的鼠标悬停使用.on('hover', function(e)

var xhr;
$('#picdiv').on('hover', function (e) {
    $(this).html('please wait...');
    $.ajax({
        url: "/Getcontent",
        type: 'POST',
        dataType: 'json',
        data: null,
        contentType: 'application/json; charset=utf-8',
        success: function (content) {
            $(this).html(content);

        },
        error: function (content) {
            //do something
        }
    });
}, function () {
    xhr.abort();
});

Answer 3

使用 onmousein 代替 onmouseover。

<div id="picdiv" onmousein="getit(this,'123')" onmouseout="killit(this)"></div>