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

Question

I'm doing something like this ->

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

so i can append the new image when the image is completely loaded

I have a timer to call this function with new parameters every 6 seconds.... but I want to call a function to load a new set of images but I have this old set running in background ( asynchronous ) and i need to stop that load so the image won't append beacuse i don't want that image and I'm trying to load a whole new different set of images... I was thinking on something like :

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
}

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

To be more specific:

I have a div called thediv where I'll be placing my images

then I have set of images or an array

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

and

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

and i have thetimer set on the

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

then i have 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
    });
}

but when the nextSlide() function is called it'd be like idle while the new image is loading and after it loads it'd the things it's supposed to do on load() but what it while loading i call this function 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();
}

Don't quite know if I'm doing this the right way and may be I can't put down the procces here the way I'm doing it.

Thanks for your responses.

Answer 1

You can spawn up "worker processes" by using setTimeout.

var proc;
somefunc();

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

//...

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

Answer 2

This should help you: Kill ajax requests using javascript using jquery.

Just keep all your requests in an array. When you want to stop them all, loop though them and call .abort() on each.

Answer 3

What if instead of appending, you do something like....

<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.
        }
    });
}

So if you called:

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

a.jpg might or might not finish first, but it doesn't matter because once a.jpg finishes, nothing happens.

Answer 4

Try using a global variable to turn on or off the timer. For instance (pseudo-code only):

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

Found the anwser here: Javascript: Cancel/Stop Image Requests

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