[英]Javascript pause problem in a loop, ajax, jquery
I'm trying to create a simple animation. 我正在尝试创建一个简单的动画。 Long story short, I've got a list of 20 small divs and one outside div.
长话短说,我列出了20个小型div和一个外部div。 I want to display five small divs within a large div at the time.
我想同时在一个大div中显示五个小div。 Ideally, I would get a set of next 5 divs every 5 seconds.
理想情况下,我每5秒会得到一组下5个div。
I'm using jquery ajax function to create small divs, here's the code: 我正在使用jquery ajax函数创建小型div,这是代码:
$(document).ready(function(){
var amount=0;
$.ajax({
type: "GET",
url: "SampleServiceIncidentList.xml",
dataType: "xml",
success: function(xml){
//creates divs within GadgetMain div, works fine.
});
amount = $("#gadgetMain").children().size(); //counts how many small divs there are
$("#testText").append("amount of children:"+amount); //and displays it in a test field
divideFeed();
}//close success
}); //close $.ajax(
function divideFeed(){ //divides the set of small divs into groups
var limit = 5;
var pagesNo = Math.ceil((amount/limit));
var minimum=0;
var maximum;
var i=0;
while (i<pagesNo)
{
minimum= i*limit;
maximum=minimum+limit;
//
// PROBLEM HERE
//
populate(minimum, maximum);
i++;
}
}
function populate(minimum, maximum){
$("#gadgetMain div").addClass('hidden'); //hides all small divs
$("#testText").append('<br/>min: '+minimum+' max: '+maximum); //prints current group of divs (0-5; 5-10 etc)
$("#gadgetMain div").slice(minimum,maximum).removeClass('hidden');
}
}); });
So, the problem is that I can't get it to wait 5 seconds to display a group of divs I'm interested in. I know that it divides divs correctly - when I alert the minimum and maximum value, it changes the content of the outer div everytime I close the alert. 因此,问题在于我无法等待5秒钟来显示我感兴趣的一组div。我知道它正确地划分了div-当我提醒最小值和最大值时,它会更改每当我关闭警报时,外部div就会显示。 But I can't find a way of pausing the function.
但是我找不到暂停功能的方法。
I would be very grateful for some help, it's driving me mad 我将非常感谢您的帮助,这让我发疯了
You don't want to pause the function; 您不想暂停该功能; instead, you want to hand control back to the browser and have it call you back after an interval.
相反,您想将控制权交还给浏览器,并让它在一定间隔后回叫您。 The
window.setTimeout
function does that. window.setTimeout
函数可以做到这一点。 (There's also the related window.setInterval
, but I usually prefer setTimeout
.) (还有相关的
window.setInterval
,但我通常更喜欢setTimeout
。)
It requires a bit of mental logic inversion, but it's very like making an Ajax call -- you ask for something, then let go and have the browser call you back when you get it. 它需要一些思维上的逻辑反转,但这非常类似于进行Ajax调用-您要求一些东西,然后放手,让浏览器在您收到请求时回叫您。
So for instance: 因此,例如:
function doSomething(x) {
runner();
function runner() {
console.log("x = " + x);
--x;
if (x > 0) {
window.setTimeout(runner, 1000);
}
}
}
doSomething(10);
...counts down from 10, once per second. ...从每秒10次减少。
doSomething
returns almost immediately, but then runner
gets called back once a second until it stops rescheduling itself. doSomething
几乎立即返回,但是随后runner
每秒被调用一次,直到它停止重新计划自身为止。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.