js定时器启动和暂停(js设置定时器和取消定时器)

http://www.itjxue.com  2023-01-30 03:59  来源:未知  点击次数: 

JS数据驱动的定时器开关(可暂停)

原本我们若想将一个定时器暂停或清除,我们通常会用clearInterval()的方法。我们在setInterval时存储这个Interval的id,之后再需要暂停时通过id查找并清除该定时器(甚至需要记录请出时变化的数据),等到需要定时器继续运转我们就setInterval()在创建一次。

本次在大量使用定时器的过程中,为了优化繁琐的操作,我给定时器内部回调函数添加了数据驱动, 每个操作对应 一个常驻定时器 , 只在页面初始化时创建一次定时器,后续不再重新创建或释放

接下来我会举几个本次做的例子:

如果我们用传统释放定时器的方式,那么释放时我们还需记录运行时间,当前状态等。重新创建我们还需要把记录的值传递进去,不甚繁琐。

以上两个例子就是本次思想的精髓, 之后准备二次封装一个新的定时器,敬请期待

做完了: 数据驱动二次封装定时器工具类

球球你们看完点个赞吧。

js中怎么让程序暂停一段时间

异步执行的函数需要使用回调来获取返回值你那种想等待回调函数执行后再把结果作为返回值的想法是无法实现,并且是极不可取的因为你并不知道需要多久该回调函数才能执行,让主线程阻塞在这儿等待不是一个正确的做法。

正确的做法还是在回调函数中获得值进行处理推荐写法:

var addre ="";var bm = new BMap.Map("container");gpsxy = function (xx,yy,i,callback){//添加一个参数作为回调函数,该函数可以获取addre参数

var gpsPoint = new BMap.Point(xx,yy);

bm.clearOverlays(); var marker = new BMap.Marker(gpsPoint); bm.addOverlay(marker);

bm.setCenter(gpsPoint); var gc = new BMap.Geocoder();

gc.getLocation(gpsPoint, function(rs){ var addComp = rs.addressComponents;

addre = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber; check();

if(callback) callback(addre);//把addre传递到回调函数中,这样就可以在函数外部使用返回值了 }); }

调用示范:gpsxy(10,10,1,function(addre){ alert(addre);//这儿就可以使用这个值了 });

JS setInterval暂停和重启

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

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

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

下面是简单的小例子,仅供参考:

style????

div?{width:100px;?height:100px;?position:absolute;?top:50px;?left:50px;?background:#ccc;}????

/style????

script????

window.onload=function(){????

var?oDiv?=?document.getElementById('div1');????

var?nLeft?=?parseInt(oDiv.currentStyle?oDiv.currentStyle.left:getComputedStyle(oDiv,false).left);????

var?timer?=?setInterval(function(){????//开启定时器

nLeft++;????

document.title=nLeft;????

oDiv.style.left=nLeft+'px';????

if(nLeft?==?500)????

{????

clearInterval(timer);????//清除定时器

}

????

},30);????

????

};????

/script????

/head????

body????

div?id="div1"/div

用javascript写一个计时器程序,有启动暂停和复位

#html:

input?type="button"?value="启动"?id="btnStart"?/

input?type="button"?value="复位"?id="btnReset"?/

label?id="lblTime"0:0:0:0/label

#javascript:

window.onload?=?function?()?{

????var?start?=?document.getElementById("btnStart");

????var?reset?=?document.getElementById("btnReset");

????var?time?=?document.getElementById("lblTime");

????

????var?h?=?0,?m?=?0,?s?=?0,?ms?=?0,?t;

????//开始计时

????start.onclick?=?function?()?{

????????bvalue?=?start.value;

????????if?(bvalue?==?"启动")?{

????????????t?=?window.setInterval(function?()?{

????????????????if?(ms?==??100)?{

????????????????????s?+=?1;

????????????????????ms?=?0;

????????????????}

????????????????if?(s?==??60)?{

????????????????????m?+=?1;

????????????????????s?=?0;

????????????????}

????????????????if?(m?==??60)?{

????????????????????h?+=?1;

????????????????????m?=?0;

????????????????}

????????????????time.textContent?=?h?+?":"?+?m?+?":"?+?s?+?":"?+?ms;

????????????????ms++;

????????????},?10);

????????????start.value?=?"暂停";

????????}

????????else?{

????????????window.clearInterval(t);

????????????start.value?=?"启动";

????????}

????}

????//复位

????reset.onclick?=?function?()?{

????????window.clearInterval(t);

????????time.textContent?=?0?+?":"?+?0?+?":"?+?0?+?":"?+?0;

????}

}

js timer启动两次怎么停止呀?

楼主你首先得分清setInterval和setTimeout的区别。

var handler =?setInterval(action, intervalTime):从运行这行代码开始,每隔intervalTime(单位是毫秒)的时间就把action执行一次,直到运行至调用clearInterval(handler)为止。

var handler = setTimeout(action, delayTime):从运行这行代码开始计时,等到delayTime(单位是毫秒)的时刻立即把action执行一次。在没到达delayTime时刻之前你可以调用clearTimeout(handler)来清除这次调用。

现在来看你的问题,

1. 为啥timer还可以用?

var timer;

timer = window.setInterval("Readcadetimer()", 1000);

你定义了一个timer变量,然后将计时器的句柄赋给它(此处的timer变量实际上就是我上面说的handler,是定时器的句柄)。运行至此处则每隔1秒(1000毫秒)运行Readcadetimer()一次。

你在没有将该定时器清除的情况下,又写了一句:

timer = window.setInterval("Readcadetimer()", 1000);

这时候你又创建了一个定时器,然后将句柄赋给了timer,第一个定时器的句柄虽然再也没有索引了,但是它实实在在存在。第二个定时器的作用仍然是每隔1秒(1000毫秒)运行Readcadetimer()一次。

下一句clearInterval(timer);

这句将你创建的第二个计时器给清除了,但是第一个计时器还在运行,所以你觉得好像timer还可以用一样。

2. timer这个数字代表啥意思?

timer没啥意思,他就是一个持有计时器对象的句柄,就相当于你想用你之前创建的计时器的时候,你可以通过timer找到它。

看你的代码需求貌似是想要把Readcadetimer()执行两次然后就结束,这里奉上代码。

请将你Readcadetimer()的定义放在我的代码之前。

var?counter?=?0,

????handler?=?setInterval(function(){

????????counter++;

????????if(?counter??2?){

????????????clearInterval(handler);

????????????return;

????????}

????????Readcadetimer()

????},?1000);

javascript定时器如何暂停及继续

//?html

div当前时间为:span?id="timeNow"/span?/div

button?id="timeBegin"计时开始/button

button?id="timeEnd"计时结束/button

button?id="timeClear"计时清除/button

//?Javascript

script?type="text/javascript"

????//定义初始值?计时器

????var?count?=?0;

????var?timer?=?"";

????//开始计时

????function?BeginTime(){

????????var?beginBtn?=?document.getElementById("timeBegin");

????????beginBtn.onclick?=?function(){

????????????timer?=?setInterval(function(){

????????????????count?++?;

????????????????document.getElementById("timeNow").innerHTML?=?count?/?100;

????????????},10)

????????}

????}

????//结束计时

????function?EndTime(){

????????var?endBtn?=?document.getElementById("timeEnd");

????????endBtn.onclick?=?function(){

????????????clearInterval(timer);

????????}

????}

????//计时清除

????function?ClearTime(){

????????var?clearBtn?=?document.getElementById("timeClear");

????????clearBtn.onclick?=?function(){

????????????document.getElementById("timeNow").innerHTML?=?"";

????????}

????}

????BeginTime();

????EndTime();

????ClearTime();

/script

//??The?Harder?You?Work,?The?Luckier?You?Will?Be.?(Jensonhui.com)

(责任编辑:IT教学网)

更多

推荐Windows服务器文章