JS中setInterval()和clearInterval()的使用以及注意事项 (实用,赞)

setInterval(): 间隔指定的毫秒数不停地执行指定的代码,定时器

clearInterval(): 用于停止 setInterval() 方法执行的函数代码

使用方法:
setInterval(code,millisec),两个参数都是必须的,第一个参数为要调用的函数或要执行的代码串。第二个参数为周期性执行或调用 code 之间的时间间隔,以毫秒计。

clearInterval(id_of_setinterval),参数是必须的,为setInterval返回的ID值

示例:

<body>

<button οnclick="start()">按钮一</button>

<button οnclick="stop()">按钮二</button>

<script type="text/javascript">

var interval = null;//计时器

var i = 0;

function start(){//启动计时器函数

if(interval!=null){//判断计时器是否为空

clearInterval(interval);

interval=null;

}

interval = setInterval(overs,1000);//启动计时器,调用overs函数,

}

function overs(){

i++;

console.log(i);

}

function stop(){

clearInterval(interval);

interval = null;

}

</script>

</body>

在使用setInterval方法时,每一次启动都需要对setInterval方法返回的值做一个判断,判断是否是空值,若不是空值,则要停止定时器并将值设为空,再重新启动,如果不进行判断并赋值,有可能会造成计时器循环调用,在同等的时间内同时执行调用的代码,并会随着代码的运行时间增加而增加,导致功能无法实现,甚至占用过多资源而卡死奔溃。因此在每一次使用setInterval方法时,都需要进行一次判断。

  1. <body>
  2.  

    <button οnclick="start()">按钮一</button>

  3.  

    <button οnclick="stop()">按钮二</button>

  4.  

  5.  

    <script type="text/javascript">

  6.  

    var interval = null;//计时器

  7.  

    var i = 0;

  8.  

    function start(){//启动计时器函数

  9.  

    if(interval!=null){//判断计时器是否为空

  10.  

    clearInterval(interval);

  11.  

    interval=null;

  12.  

    }

  13.  

  14.  

    interval = setInterval(overs,1000);//启动计时器,调用overs函数,

  15.  

    }

  16.  

  17.  

    function overs(){

  18.  

    i++;

  19.  

    console.log(i);

  20.  

    }

  21.  

  22.  

    function stop(){

  23.  

    clearInterval(interval);

  24.  

    interval = null;

  25.  

    }

  26.  

    </script>

  27.  

    </body>

原文地址:https://www.cnblogs.com/shez/p/11725131.html

时间: 2024-10-09 09:10:56

JS中setInterval()和clearInterval()的使用以及注意事项 (实用,赞)的相关文章

js中setInterval与setTimeout用法

setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: code (必需):要调用的函数后要执行的 JavaScript 代码串. millisec(必需):在执行代码前需等待的毫秒数. 提示: setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). 两种调用函数的写法:

JS里设定延时:js中SetInterval与setTimeout用法

js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象 SetInterval为自动重复,setTimeout不会重复. clearTimeout(对象) 清除已设置的se

js中setInterval与setTimeout用法 实现实时刷新每秒刷新

setTimeout 定义和用法:  setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法:  setTimeout(code,millisec) 参数:  code (必需):要调用的函数后要执行的 JavaScript 代码串. millisec(必需):在执行代码前需等待的毫秒数. 提示:  setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). 两种调用函数的

在Js中得到元素的子元素集合注意事项

http://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html 在Js中得到元素的子元素集合注意事项 费话少说,直接看例子: 1 <ul>2  <li>this's one</li>3  <li>this's two</li>4  <li>this's three</li>5  <li>this's four</li>6 <ul

JS中setInterval、setTimeout不能传递带参数的函数的解决方案

在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,接下来为大家介绍具体的解决方法 在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数, 这就需要想方法解决. 一.采用字符串形式:——(缺陷)参数不能被周期性改变 setInterval("foo(id)",1000); 二.匿名函数包装 (推荐) window.setInterval(

js中setInterval和setTimeout区别和用法

setTimeout setTimeout() //- 在指定时间后执行代码clearTimeout() //- 取消 setTimeout(),clearTimeout()方法的参数必须是由setTimeout()返回的ID值. 注意: setTimeout() 和 clearTimeout() 都是HTML DOM 的 Window 对象的函数. 用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式.     语法: setTimeout(code,millisec)

js中setInterval() 和 setTimeout()

setInterval() 方法 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 语法 setInterval(code,millisec[,"lang"]) 参数 描述 code 必需.要调用的函数或要执行的代码串. milli

在javascript中 setInterval()、clearInterval()、clearTimeout()等等常用的函数的含义

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数.clearInterval() 定义和用法clearInterval() 方法可取消由 setInterval() 设置的 timeout.clearInterval() 方法的参数必须是由 setInter

JS中setInterval、setTimeout不能传递带参数的函数的解决方法

setInterval 和 setTimeout 这两个函数比较好用,但会遇到比如说我隔个几秒后要执行的函数是带参数的,这种情况怎么办?可以用匿名函数包装处理 //不带参数的函数 function test(){} setTimeout(test,1000) //带参数的函数,用匿名函数包装(可以实现动态传参) function onemodelanima(o, tobestatus, time, easing, origin){ if(easing == null){ easing = "&q