如何取消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
    ...
  }
});