0

我有一个 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()
 }
4

3 回答 3

2

您可以简单地将 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()
 }
于 2013-07-30T04:17:24.803 回答
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();
});
于 2013-07-30T04:11:52.367 回答
0

使用 onmousein 代替 onmouseover。

<div id="picdiv" onmousein="getit(this,'123')" onmouseout="killit(this)"></div>
于 2013-07-30T04:33:29.517 回答