jquery html JS setInterval暂停和重启_CMS教程

setInterval(click, 1000);改成setInterval("$('#btn_week')click()", 1000);另外click事件里面不要用alert，因为alert会阻塞程序的执行。

javascript的setTimeout以及setInterval休眠问题。

前端码农们在做项目中时候，必定不可少的需要做到轮播效果。但是有些特殊的需求，比如：

需要做到第一个容器内容轮播滚动之后，第二个容器内部再轮播滚动，再第三个容器内容轮播滚动。

这时候我的一开始的思路是：每个容器都看成一个单独的轮播效果，既然是依次的滚动就设定滚动开始时间差,三个setTimeout()分别延迟差。

HTML 代码：

</ul>

</div>

</ul>

</div>

</ul>

</div>

CSS 代码：

items{height: 18px;overflow: hidden;margin-bottom: 10px;border-bottom: 1px dashed #999;}

JAVASCRIPT 代码：(基于jquery的实现)

var uls = $("#warp")find("island"),

lh = ulsfind('li')height(),

size = ulssize(),

Global=[];//全局变量

ulseach(function(i,el){

$(el)find('li')first()clone(true)appendTo($(el));

});

/动画效果/

function animates(i){

Global[i]==undefined&&(Global[i]=0);

Global[i]++;

_els =ulseq(i);

var len = _elsfind('li')length;

_elsanimate({"marginTop":-Global[i]lh+"px"},600,function(){

if(Global[i] == len-1){

Global[i]=0;

_elscss({"margin-top":"0px"});

}

});

};

function interval(i){

setInterval(function(){

animates(i)

},5000);

};

for(var x=0;x<size;x++){

(function(x){

setTimeout(function(){

interval(x);

},650+x650);

})(x)

};

一开始的时候我发现都是OK的，但是当我切换到别的页面，或者暂时最小化的时候，轮播就变得杂乱无章。这个问题困扰我很久,到公司请教

大牛同事，他说可能是 setInterval休眠问题导致。

经过仔细的查阅资料以及实践，发现当页面最小化时候或者切换网页浏览其他网页等情况时， setInterval是会暂时进入“休眠”状态,但是并不是不执行程序,它会把需要执行的 *** 作放在队列中，等到下次窗口一打开的一瞬间把队列里面的全部执行，由于程序处理太快我们大部分时候并没有注意到这个问题。但是你去看所有网站的轮播效果，

假设现在你轮播的是第四张大图，下次打开时候播放的可能是任意的。

再分析上面的程序：

我们让程序分别过650ms, 1300ms,1950ms执行如果窗口一直是这个是本窗口，也就是没有进行休眠。程序可以照常执行。

如果窗口最小化，程序进入休眠，会把队列中的 *** 作在很快时间内一起执行，所以程序一下子就乱啦。

那如何解决这个问题呢还是想了啦jquery的animate，如果在动画animate的回调中进行递归，进入下次的轮播。那不就完美解决！！

让我们来看程序：

JAVASCRIPT代码：

var uls = $("#warp")find("island"),

lh = ulsfind('li')height(),

size = ulssize(),

i = 0;

ulseach(function(i,el){

$(el)find('li')first()clone(true)appendTo($(el));

});

function animates(i){

var ul = $('items')eq(i)find('ul');

if(!ul){returnfalse;}

var count = parseInt(ulattr("count-role")||0);

count++;

var len = ulfind('li')length;

ulanimate({"marginTop":-countlh+"px"},600,function(){

if(count == len-1){

count=0;

ulcss({"margin-top":"0px"});

}

ulattr("count-role",count);

animates(++i);

});

};

function interval(){

setInterval(function(){

animates(i)

},5000);

};

interval()

这样就完美解决了这个问题。

我猜想可能由于浏览器的特殊性，它的资源有限。所以采用这个策略，也是可以理解的。

</audio>

</div>

//播放器控制

var audio = documentgetElementById('mp3Btn');

$('audio_div')click(function(){

//防止冒泡

eventstopPropagation();

if(audiopaused) //如果当前是暂停状态

{

$('audio_div')css("background","url(播放状态按钮) no-repeat center bottom");

$('audio_div')css("background-size","cover");

audioplay();//播放

return;

}

//当前是播放状态

$('audio_div')css("background","url(暂停状态按钮) no-repeat center bottom");

$('audio_div')css("background-size","cover");

audiopause(); //暂停

});

</script>

<!doctype html>

<head>

<title>Document</title>

</head>

<body>

<button onclick="go()">start</button><button onclick="stop()">stop</button><button id="jixu" onclick="jixu()" style="display: none;">continue</button>

var time,

div=documentgetElementById('result'),

stopState = false;

function go(){

time = documentgetElementById('inp')value;

timeout();

}

function timeout(){

if(time ==''){

alert('请输入时间')

return;

}

setTimeout(function(){

time--;

divinnerText = time;

if(time!==0 && !stopState){

timeout();

}

},1000);

}

function jixu(){

time = Number(documentgetElementById('result')innerText);

documentgetElementById('jixu')styledisplay = 'none';

stopState =false;

timeout();

}

function stop(){

documentgetElementById('jixu')styledisplay = '';

stopState = true;

}

</script>

</body>

</html>

以上就是关于jquery html JS setInterval暂停和重启全部的内容，包括:jquery html JS setInterval暂停和重启、页面切换或最小化时，所有JS暂停，怎么解决、JS 一个按钮控制网页背景音乐的开始暂停等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/9331402.html

jquery html JS setInterval暂停和重启

发表评论

评论列表（0条）