js中如何移除定时器

JavaScript010

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>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<button type="button" id="cancel">取消定时器</button>

<script>

let time = setInterval(()=>{

console.log('当前时间是:'+timer())

},1000)

function timer(){

let date = new Date()

let hour = date.getHours().toString().padStart(2,"0")

let min = date.getMinutes().toString().padStart(2,"0")

let sec = date.getSeconds().toString().padStart(2,"0")

return `${hour}:${min}:${sec}`

}

document.getElementById('cancel').onclick = function(){

clearInterval(time)

alert('已取消定时器')

}

</script>

</body>

</html>

//创建一个定时器

var timer = setInterval(function(){

  //dosomething...

  if(这里写条件){//满足某个条件时 清除定时器

    clearInterval(timer)

  }

},1000)