首页 > 编程 > JavaScript > 正文

Javascript定时器的使用

2019-11-06 08:26:56
字体:
来源:转载
供稿:网友
        在javascript中有两个函数可以实现"定时器"的功能setTimeout和setInterval,这两个函数的参数是相同的,但是代表的意义有所差别。例如setTimeout('test()',3000);的意思是3000毫秒之后执行函数test()(仅仅执行一次),setInterval('test()',3000); 表示每隔3000毫秒执行一次test()函数。一个是仅仅执行一次一个是不断执行。我们编写如下代码:<script>function test(){    alert('111');}setInterval('test()',3000);//每隔3秒执行一次函数test()</script>

        我们执行会看到每隔3秒会执行alert('111');不会停止,如果编写如下代码:

<script>function test(){    alert('111');}setTimeout('test()',3000); //3秒之后执行一次(仅仅执行一次)</script>

        运行会发现3秒后执行一次就不执行了,这就是两者的差别,使用哪一个看我们的具体需求,其实变通一下也可以使setTimeout具有和setInterval同样的功能,例如:

<script>function test(){    alert('111');    setTimeout('test()',3000);//函数内调用}setTimeout('test()',3000); //3秒之后执行一次(仅仅执行一次)</script>        在函数内执行了setTimeout,这样我们执行后会发现也是每隔3秒执行一次的。另外要注意的是,有时我们需要手动停止执行,例如我们使用定时器实现了图片的漂浮功能(每隔一定时间设置图片的坐标),当鼠标移动到图片时我们需要定时器“失效”,这如何实现呢?如果使用了setInterval那很好办,在执行setInterval后,回返回一个timer ID,如果将该ID传递给函数clearInterval,就可以终止执行调用过的函数了,例如:<div id="show">0</div><script>function test(){    var obj = document.getElementById('show');    obj.innerHTML = parseInt(obj.innerHTML) + 1;}function start_add(){    time_id = setInterval('test()',500);//每隔0.5秒执行一次函数test()}</script><input type="button" value="点击开始执行" onclick="start_add();" /><input type="button" value="点击终止执行" onclick="clearInterval(time_id);" />        可以执行一下以上代码看一下效果。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表