Question

我正在做这样的事情 - ＆gt;

$("<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
}

/ * / / * / / / * / / / * / / / * / < EM> / / * / / / * /

更具体一点：

我有一个名为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

这可以帮助您：Kill ajax requests using javascript using jquery.

将所有请求保存在数组中。当你想要全部停止它们时，循环它们并在每个上面调用.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: Cancel/Stop Image Requests

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

如何阻止Ajax图像加载调用一个新函数？

5 个答案: