JavaScript中停止执行setInterval和setTimeout事件的方法

更新时间：2015年05月14日 09:15:57 投稿：junjie

这篇文章主要介绍了JavaScript中停止执行setInterval和setTimeout事件的方法,本文给出操作实例代码和语法介绍,需要的朋友可以参考下

js 代码中执行循环事件时，经常会用到 setInterval 和 setTimeout 这两个方法，关于这两个方法的细节这里不详细讨论了，简要分享下在需要停止循环事件的时候该如何操作。

（1）setInterval 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，停止该方法可使用 clearInterval 方法。具体示例如下：

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<input type="text" id="clock" size="50" />

<script language=javascript>

var int=self.setInterval("clock()",50);//每隔 50 毫秒调用 clock() 函数

function clock(){

 var t=new Date();

 document.getElementById("clock").value=t;

}

</script>

<button onclick="window.clearInterval(int)">停止 interval</button>

</body>

</html>

语法 clearInterval(id_of_setinterval)

参数 id_of_setinterval 表示由 setInterval() 返回的 ID 值。

clearInterval() 方法可取消由 setInterval() 设置的 timeout；clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

（2）setTimeout 方法用于在指定的毫秒数后调用函数或计算表达式。停止该方法可使用 clearTimeout 方法。具体示例如下：

提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

复制代码代码如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

var c=0;

var t;

function timedCount(){

 document.getElementById('txt').value=c;

 c=c+1;

 t=setTimeout("timedCount()",1000);

}

function stopCount(){

 clearTimeout(t);

}

</script>

</head>

<body>

<input type="button" value="开始计数" onClick="timedCount()">

<input type="text" id="txt">

<input type="button" value="停止计数" onClick="stopCount()">

</body>

</html>

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

语法 clearTimeout(id_of_settimeout)

参数 id_of_setinterval 表示由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

您可能感兴趣的文章:

AjaxUpLoad.js实现文件上传功能
这篇文章主要为大家详细介绍了AjaxUpLoad.js实现文件上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-03-03
bootstrap选项卡使用方法解析
这篇文章主要为大家详细介绍了bootstrap选项卡使用方法，包括选项卡组件和底部可以切换的选项卡面板使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
JS中把函数作为另一函数的参数传递方法(总结)
下面小编就为大家带来一篇JS中把函数作为另一函数的参数传递方法(总结)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
JavaScript实现网络测速的方法详解
在我们的日常生活中离不开网络，而网络的快慢直接决定了用户的产品使用体验。本文就来带大家了解如何用JavaScript实现网络测速，需要的可以参考一下
2023-01-01
分享一则javascript 调试技巧
这篇文章主要分享了一则javascript 调试技巧,需要的朋友可以参考下
2015-01-01
javascript中mouseover、mouseout使用详解
这篇文章主要介绍了javascript中mouseover、mouseout使用详解的相关资料,需要的朋友可以参考下
2015-07-07
js时间控件只显示年月
本文详细介绍了js时间控件只显示年月的方法。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
Javascript的构造函数和constructor属性
我们知道，默认情况下，对一个函数前面使用new，可以构造出一个对象。每一个对象都有一个constructor属性，这个constructor属性指向构造出该对象的函数。
2010-01-01
经常用到的javascript验证函数收集
经常用到的javascript验证函数收集...
2007-11-11
javascript实现画板功能
这篇文章主要为大家详细介绍了javascript实现画板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-04-04