如何取消jquery.load()？

当load()在5秒钟内没有返回时，我想取消一个.load()操作。如果是这样，我会显示一个错误信息，如“抱歉，没有图片加载”。

我有什么

…超时处理：

jQuery.fn.idle = function(time,postFunction){  
    var i = $(this);  
    i.queue(function(){  
        setTimeout(function(){  
            i.dequeue();
            postFunction();  
        },time);  
    });
    return $(this); 
};

…初始化错误消息超时：

var hasImage = false;

$('#errorMessage')
    .idle(5000,function() {

        if(!hasImage) {
            // 1. cancel .load()            
            // 2. show error message
        }
    });

…图像加载：

$('#myImage')
     .attr('src','/url/anypath/image.png')
     .load(function(){
         hasImage = true;
         // do something...
      });

我唯一无法想像的是如何取消运行的load()(如果可能的话)。

编辑：

另一种方法：如何防止.load()方法在返回时调用它的回调函数？

解决方法

如果你想要这样的自定义处理，你根本无法使用jQuery.load()函数。你必须升级到jQuery.ajax()，我建议，因为你可以做更多的这一点，特别是如果你需要任何种类的错误处理，这将是必要的。

对jQuery.ajax使用beforeSend选项并捕获xhr。然后，您可以创建回调，可以在超时后取消xhr，并根据需要进行回调。

这段代码没有测试，但应该让你开始。

var enableCallbacks = true;
var timeout = null;
jQuery.ajax({
  ....
  beforeSend: function(xhr) {
    timeout = setTimeout(function() {
      xhr.abort();
      enableCallbacks = false;
      // Handle the timeout
      ...
    },5000);
  },error: function(xhr,textStatus,errorThrown) {
    clearTimeout(timeout);
    if (!enableCallbacks) return;
    // Handle other (non-timeout) errors
  },success: function(data,textStatus) {
    clearTimeout(timeout);
    if (!enableCallbacks) return;
    // Handle the result
    ...
  }
});

原文地址：https://www.jb51.cc/jquery/182169.html