jquery - 如何取消 jquery.load()？

Question

当 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() 方法在返回时调用它的回调函数？

Answer 1

如果您想要任何像这样的自定义处理，您就不能使用 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
    ...
  }
});