js怎样实现暂停

JavaScript018

js怎样实现暂停,第1张

function Test(){

alert("hellow")

this.NextStep=function(){

alert("NextStep")

}

}

我们可以这样调用 var myTest=new Test()myTest.NextStep()我们做暂停的时候可以吧一个函数分为两部分,暂停操作前的不变,把要在暂停后执行的代码放在this.NextStep中。

为了控制暂停和继续,我们需要编写两个函数来分别实现暂停和继续功能。

暂停函数如下: */function Pause(obj, iMinSecond) {if (window.eventList == null)

window.eventList = new Array() var ind = -1 for ( var i = 0i <window.eventList.lengthi++) {if (window.eventList[i] == null) {

window.eventList[i] = obj

ind = i break

}

}if (ind == -1) {

ind = window.eventList.length

window.eventList[ind] = obj

}

setTimeout("GoOn(" + ind + ")", iMinSecond)

}/*

* 该函数把要暂停的函数放到数组window.eventList里,同时通过setTimeout来调用继续函数。 继续函数如下: */function GoOn(ind) {var obj = window.eventList[ind]

window.eventList[ind] = null if (obj.NextStep)

obj.NextStep() else

obj()

}/*

* 该函数调用被暂停的函数的NextStep方法,如果没有这个方法则重新调用该函数。 函数编写完毕,我们可以作如下册是: */function Test() {

alert("hellow")

Pause(this, 3000)// 调用暂停函数

this.NextStep=function(){

alert("NextStep")

}

}

Test()

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setInterval() 没有暂停这一说,只能清除和开启。

<title></title>

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

var iCount = setInterval(GetBack, 3000)

function GetBack() {

alert("aa")

$.ajax({

type: "POST",

url: "WebForm4.aspx/GetString",

dataType: "text",

contentType: "application/jsoncharset=utf-8",

beforeSend: function (XMLHttpRequest) {

},

success: function (msg) {

alert("ff")

},

error: function (msg) {

alert(msg)

}

})

}

$("#cOk").click(function (e) {

clearInterval(iCount)

})

})

</script>

<div>

<a href="#" id="cOk" >sss</a>

</div>

后台代码

------------------

[WebMethod]

public static string GetString()

{

return "aa"

}

javascript的setTimeout以及setInterval休眠问题。

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

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

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

HTML 代码:

<div id="warp">

<div class="items">

<ul class="island s1">

<li>111</li>

<li>222</li>

<li>333</li>

</ul>

</div>

<div class="items">

<ul class="island s2">

<li>444</li>

<li>555</li>

<li>666</li>

</ul>

</div>

<div class="items">

<ul class="island s3">

<li>777</li>

<li>888</li>

<li>999</li>

<li>000</li>

</ul>

</div>

</div>

CSS 代码:

.items{height: 18pxoverflow: hiddenmargin-bottom: 10pxborder-bottom: 1px dashed #999}

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

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

lh = uls.find('li').height(),

size = uls.size(),

Global=[]//全局变量

uls.each(function(i,el){

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

})

/*动画效果*/

function animates(i){

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

Global[i]++

_els =uls.eq(i)

var len = _els.find('li').length

_els.animate({"marginTop":-Global[i]*lh+"px"},600,function(){

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

Global[i]=0

_els.css({"margin-top":"0px"})

}

})

}

function interval(i){

setInterval(function(){

animates(i)

},5000)

}

for(var x=0x<sizex++){

(function(x){

setTimeout(function(){

interval(x)

},650+x*650)

})(x)

}

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

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

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

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

再分析上面的程序:

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

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

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

让我们来看程序:

JAVASCRIPT代码:

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

lh = uls.find('li').height(),

size = uls.size(),

i = 0

uls.each(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(ul.attr("count-role")||0)

count++

var len = ul.find('li').length

ul.animate({"marginTop":-count*lh+"px"},600,function(){

if(count == len-1){

count=0

ul.css({"margin-top":"0px"})

}

ul.attr("count-role",count)

animates(++i)

})

}

function interval(){

setInterval(function(){

animates(i)

},5000)

}

interval()

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

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