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 值。该值标识要取消的延迟执行代码块。

赞 (0)

相关推荐

  • setinterval()与clearInterval()JS函数的调用方法

    本文实例讲述了setinterval()与clearInterval()JS函数的调用方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.

  • JS SetInterval 代码实现页面轮询

    JS SetInterval 代码实现页面轮询

    概念介绍 setInterval 是一个实现定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval方法会不停地调用函数,直到 clearInterval 被调用或窗口被关闭. 由 setInterval 返回的ID值可用作 clearInterval 方法的参数. 提示: 1000 毫秒= 1 秒. flash用法(来自百度百科) setInterval 动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时

  • 快速掌握Node.js中setTimeout和setInterval的使用方法

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInterval的使用. 一.setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法.当调用setTime()时回调函数会在delayMillSeconds后 执行

  • JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

  • javascript中SetInterval与setTimeout的定时器用法

    示例一: 查看演示 下载源码 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.也就是说setTimeout()只执行一次,setInterval()可以执行多次.两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数. setTimeOut用法 setTimeout函数的用法如下: var timeoutID = window.setTi

  • JavaScript使用setInterval()函数实现简单轮询操作的方法

    JavaScript使用setInterval()函数实现简单轮询操作的方法

    本文实例讲述了JavaScript使用setInterval()函数实现简单轮询操作的方法.分享给大家供大家参考.具体分析如下: 轮询(Polling)是一种CPU决策如何提供周边设备服务的方式,又称"程控输出入"(Programmed I/O).轮询法的概念是,由CPU定时发出询问,依序询问每一个周边设备是否需要其服务,有即给予服务,服务结束后再问下一个周边,接着不断周而复始.轮询法实作容易,但效率偏低. 在JavaScript使用setInterval函数作简单的轮询操作,可以随时

  • JavaScript中setTimeout和setInterval函数的传参及调用

    如何向 setTimeout . setInterval 传递参数 看如下代码: var str = 'aaa'; var num = 2; function auto(num){ alert(num); } setTimeout('auto(num)',4000); 这样写是可以正常工作的,但是如其说这是参数传递,还不如说是直接使用的全局变量.所以,这种写法是没有必要的,一般情况下更多的是用到传递局部变量作为参数. 把代码修改一下: //var str = 'aaa'; var num = 2

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

    js 代码中执行循环事件时,经常会用到 setInterval 和 setTimeout 这两个方法,关于这两个方法的细节这里不详细讨论了,简要分享下在需要停止循环事件的时候该如何操作. (1)setInterval 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,停止该方法可使用 clearInterval 方法.具体示例如下: 复制代码 代码如下: <html> <meta http-equiv="Content-Type" content="t

  • JavaScript中Textarea滚动条不能拖动的解决方法

    本文实例分析了JavaScript中Textarea滚动条不能拖动的解决方法.分享给大家供大家参考,具体如下: 在IE中,你是否碰到过Textarea的滚动条不能拖动,但点上下按钮可以滚动内容? 这个问题的原因很可能就是在该Textarea中绑定了onfocus事件,但是,基于某种条件,又将其焦点去掉(即blur()),这样就导致滚动条不能拖动. 一个典型的例子为: me.$input.on("focus",function(){ if ($isIE && me.ena

  • javascript处理a标签超链接默认事件的方法

    本文实例讲述了javascript处理a标签超链接默认事件的方法.分享给大家供大家参考.具体分析如下: 有时需要在a标签上添加click事件,并且跳转前处理一些事务,故需要做一些处理:通常前端会给出一个<a href="#">link</a>来代表这个行为,有些还会这样写<a href="###">link</a>或者<a href="javascript:void(0);">link&

  • layui问题之模拟table表格中的选中按钮选中事件的方法

    一.问题 不操作页面,实现table表格中的checkbox选中功能 二.经过 刚开始的思路: 1.通过table的id,找到table渲染时生成的div,即table的下一个兄弟节点div.layui-table-view 2.由于checkbox是固定列,再通过第一步,找到div.layui-table-view的子元素.layui-table-fixed 3.紧接着,找出table的第一行的第一个td里面的input,即tr[data-index="0"] td input(注:

  • JavaScript中发出HTTP请求最常用的方法

    JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求.在本文中,我们将介绍一些在JavaScript中发出HTTP请求的流行方法. Ajax Ajax是发出异步HTTP请求的传统方式.可以使用HTTP POST方法发送数据,并使用HTTP GET方法接收数据.我们来看看发送GET请求.我将使用JSONPlaceholder,这是一个免费的在线REST API,适用于以JSON格式返回随机数据的开发人员. 要在Ajax中进行HTTP调用,您需要初始化一个新

  • JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍

    •原理: •高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: •forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: •数组中有几项,那么传递进去的匿名回调函数就需要执行几次: •每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: •理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行

  • angularjs中回车键触发某一事件的方法

    要求:在输入框中输入值以后,按回车键触发某一事件的执行 html: <input id="input" name="input" ng-model="querykdUser.page.pageSize" ng-keyup="myKeyup($event)" class="form-control" style="width:60px;"> js: $scope.myKeyup

  • 在javascript中使用com组件的简单实现方法

    首先创建一个COM组件,插入一个双接口Itest,在此接口上实现以下三个方法: STDMETHODIMP Ctest::test(void) //无输入输出参数  {  // TODO: 在此添加实现代码  MessageBox(NULL,L"test",L"test",MB_OK);  return S_OK;  }  STDMETHODIMP Ctest::test1(BSTR a1) //有一个字符串输入参数  {  // TODO: 在此添加实现代码  Me

  • JavaScript中数组去除重复的三种方法

    废话不多说了,具体方法如下所示: 方法一:返回新数组每个位子类型没变 function outRepeat(a){ var hash=[],arr=[]; for (var i = 0; i < a.length; i++) { hash[a[i]]!=null; if(!hash[a[i]]){ arr.push(a[i]); hash[a[i]]=true; } } console.log(arr); } outRepeat([2,4,4,5,"a","a"

  • javascript中去除数组重复元素的实现方法【实例】

    在实际应用中,我们很多时候都可能需要去除数组中的重复元素,下面就是javascript数组去重的方法实现: <script language="javascript"> <!-- /*判断数组中是否存在某个元素的方法*/ function isExistInArr(_array, _element){ if(!_array || !_element) return false; if(!_array.length){ return (_array == _elemen

随机推荐