js中如何移除定时器

js中如何移除定时器,第1张

定时器一般有两个

1)setTimeout()//n毫秒后执行一次

2)setInterval()//每隔n秒执行一次

这两个方法都有个返回值,返回一个定时器id,可以定义一个变量接收

清除定时器方法:

setTimeout()对应的是 clearTimeout(id)

setInterval()对应的是 clearInterval(id)

下面有个例子:

<script>

    //setTimeout 1000ms后执行1次

   var i = setTimeout(function(){

   },1000)

    //setInterval 每隔1000ms执行一次

    var j = setInterval(function(){

    },1000)

    //清除Timeout的定时器,传入id(创建定时器时会返回一个id)

    clearTimeout(i)

    //清除Interval的定时器,传入id(创建定时器时会返回一个id)

    clearInterval(j)

</script>

var id=setInterval(function(){ },1000)

window.clearInterval(id)

clearInterval() 方法可清除setinterval

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

关于jquery插件jTimer(jquery定时器)使用方法

复制代码 代码如下:

(function ($) {

$.extend({

timer: function (action,context,time) {

var _timer

if ($.isFunction(action)) {

(function () {

_timer = setInterval(function () {

if (!action(context)) {

clearInterval(_timer)

}

}, time)

})()

}

}

})

})(jQuery)

复制代码 代码如下:

#wrap

{

display: table

margin: 0 auto

}

#cvs

{

display: table-cell

vertical-align: middle

}

function drawRound(context) {

if (context.counterclockwise) {

draw(context.x, context.y, context.r, context.start, context.start - Math.PI / 50, context.counterclockwise)

context.start -= Math.PI / 50

return context.start >0.5 * Math.PI

}

else {

draw(context.x, context.y, context.r, context.start, context.start + Math.PI / 50, context.counterclockwise)

context.start += Math.PI / 50

return context.start <Math.PI

}

}

function draw(x, y, r, sAngle, eAngle, counterclockwise) {

var cvs = document.getElementById("cvs")

ctx = cvs.getContext("2d")

ctx.strokeStyle = "#f00"

ctx.beginPath()

ctx.arc(x, y, r, sAngle, eAngle, counterclockwise)

ctx.stroke()

}

$(function () {

$.timer(drawRound, { x: 100, y: 100, r: 50, start: 1.5 * Math.PI, counterclockwise: true }, 200)

$.timer(drawRound, { x: 100, y: 100, r: 60, start: 0, counterclockwise: false }, 200)

})


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11873680.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存