如何停止调用新功能的Ajax图像加载？

Question

我正在做这样的事情->

$("<img>").attr("src", "path/to/image.jpg").load(function(){
    $("#thediv").append(this);
});

这样我就可以在图像完全加载后附加新图像

我有一个计时器，每6秒钟用新参数调用此函数。...但是我想调用一个函数以加载一组新图像，但是我有这个旧组在后台运行（异步），因此我需要停止该操作加载，因此图像将不会追加，因为我不想要该图像，而我正在尝试加载一组全新的不同图像集...我在考虑以下内容：

function loadNewSet(){
   window.stop(); // i don't quite know if this exist or works but 
                 //should stop all ajax request taking place at that time
   loadImages(); // call some function to load the new set
}

/ * / / * / / / * / / / * / / / * / / / * / / / * /

更加具体：

我有一个名为thediv的div，我将在其中放置图片

然后我有一组图像或一个数组

set1 = ['img1','img2','img3']

和

set2 = ['img4','img5','img6']

我在上面设置了thetimer

$(document).ready(function(){
    thetimer=setTimeout("nextSlide()",6000);
});

然后我有nextSlide()

function nextSlide(){
     //this is where i load the next image on the active set (set 1 or set 2)
    img.load(function(){
       thetimer=setTimeout("nextSlide()",6000); // and then i set the timer again
    });
}

但是，当调用nextSlide()函数时，它就像是在加载新图像时一样是空闲的，而在加载新图像后，它应该在load()上执行该操作，但是在加载时我将其称为该函数loadNewSet()

function loadNewSet(set){
    clearTimeout(thetimer);
    //this is wheere i want to stop any image loading called by any other function
    stopAllImagesLoading();//example
    //then change activeset
    activeSet=set; // set1 or set2
    nextSlide();
}

不太清楚我是否以正确的方式进行操作，可能是我无法按照自己的方式在此处放置程序。

感谢您的回复。

Answer 1

您可以使用setTimeout生成“工作进程”。

var proc;
somefunc();

function somefunc() {
    //do stuff
    proc = setTimeout(somefunc, 6000);
}

//...

clearTimeout(proc); //Cancel the looping somefunc from executing.

Answer 2

这应该可以帮助您： 使用jquery使用javascript杀死ajax请求。

只需将所有请求保存在一个数组中即可。 当您要停止所有它们时，遍历它们并.abort()对它们调用.abort() 。

Answer 3

如果您执行类似...而不是追加操作，该怎么办？

<div id="myDiv">
    <img id="myImg" style="display: none">
</div>

...

function loadImg(url){
    $("#myImg").attr("src", url).load(function(){
        if(url == $(this).attr(url)){
            // The currently requested image has loaded.  Show it.
            $(this).show();
        }
        else{
            // Finished loading an image that we don't need anymore.  Do nothing.
        }
    });
}

因此，如果您致电：

loadImg("a.jpg");
loadImg("b.jpg");

a.jpg可能会先完成，也可能不会先完成，但这并不重要，因为一旦a.jpg完成，就什么也不会发生。

Answer 4

尝试使用全局变量打开或关闭计时器。 例如（仅伪代码）：

var gKeepRunning = true;   //KEY TO ANSWER HERE

myRepeatingImageLoader();   //this is the method that will repeat

function myRepeatingImageLoader(){
  $("<img>").attr("src", "path/to/image.jpg").load(function(){
    $("#thediv").append(this);
  });

  if( gKeepRunning == true )   //KEY TO ANSWER HERE - WILL STOP WHEN SET TO FALSE
    var junk = setTimeout('myRepeatingImageLoader();', 6000);   //Repeat again
}

function loadNewSet(){
  gKeepRunning == false;   //KEY TO ANSWER HERE
  loadImages();
}

Answer 5

在此处找到答案： Javascript：取消/停止图像请求

    if(window.stop !== undefined)
    {
         window.stop();
    }
    else if(document.execCommand !== undefined)
    {
         document.execCommand("Stop", false);
    }