JavaScript clearTimeout()

红太狼 2020-05-27 13:04 583阅读 0赞

# JavaScript clearTimeout()

掌握一个概念可以从名称入手，因为其名称很大程度上能够体现映它的功能。

clearTimeout() 可以停止定时器 setTimeout() 执行，分解两个方法名称：

setTimeout 由如下两个单词合成：

（1）.set：设置

（2）.timeout：超时。

那么也就是设置一个超时时间，超过这个时间就会执行回调函数。

clearTimeout 由如下两个单词合成：

（1）.clear：清除

（2）.timeout：超时。

clearTimeout() 与 setTimeout() 之间的关系就清楚了，它可以清除或者说停止由 setTimeout() 方法设置的定时器的执行，如果到这里还是不够清晰，不用担心，后面会有详细的代码实例演示。

语法结构：

```javascript
clearTimeout(id_of_settimeout)
```

参数解析：

（1）.id_of_settimeout：要被停止的定时器的标识，将要被停止 setTimeout() 的返回值。

**浏览器支持：**

（1）.IE 浏览器支持此方法。

（2）.edge 浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera 浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safari浏览器支持此此方法。

**代码实例如下：**

```html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title>
<style type="text/css">
#ant{ 
  width:150px; 
  height:100px; 
  text-align:center; 
  line-height:100px; 
  background-color:#ccc; 
  color:red; 
} 
</style> 
<script> 
let count = 0; 
let flag 
window.onload = function(){ 
  let odiv=document.getElementById("ant");
  let bt = document.getElementById("bt"); 
  let flag=setTimeout(function(){
    odiv.innerHTML="蒲公英云";
  },2000);
  bt.onclick=function(){
    clearTimeout(flag);
  }
} 
</script> 
</head> 
<body> 
<div id="ant"></div> 
<input type="button" id="bt" value="查看演示"/>
</body> 
</html>
```

代码分析如下：

（1）.如果不点击按钮，那么在2000毫秒，也就是2秒钟之后，会将指定字符串写入div。

（2）.点击按钮之后，会调用clearTimeout方法，它的参数是setTimeout定时器函数的标识。

（3）.于是就会停止定时器函数的执行，2秒后也不会执行回调函数，也就是不会将字符串写入div。

上述代码非常简单，再来看一个通过setTimeout方法实现的计数效果，然后再通过clearTimeout方法停止计数。

代码实例如下：

```html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title>
<style type="text/css">
#num{ 
  width:150px; 
  height:60px; 
  text-align:center; 
  line-height:60px; 
  background-color:#ccc; 
  color:red; 
} 
</style> 
<script> 
let count = 0; 
let flag 
window.onload = function(){ 
  let num = document.getElementById("num"); 
  let bt = document.getElementById("bt"); 
  function jishu(){ 
    num.innerHTML = count; 
    count = count + 1; 
    flag = setTimeout(jishu,1000); 
  } 
  jishu() 
      
  bt.onclick = function(){ 
    clearTimeout(flag); 
  } 
} 
</script> 
</head> 
<body> 
<div id="num"></div> 
<input type="button" id="bt" value="查看效果"/>
</body> 
</html>
```

点击按钮可以停止计数效果，代码分析如下：

（1）.通常使用setInterval方法实现计数效果，使用setTimeout方法同样可以。

（2）.jishu函数每执行一次可以将数字写入div，并加1，但此函数的核心在于最后的部分。

（3）.jishu的最后通过定时器函数setTimeout规定1秒后调用jishu函数自身，通过递归实现数字不断累加效果。

（4）需要注意的是，每一次调用setTimeout，它的返回值都是不同的，定时器函数的标识都是一一对应的。

（5）.点击按钮之后，通过clearTimeout停止setTimeout的执行，那么也就停止了递归效果。

笔者本人感觉文章对标题中的方法已经有了足够清晰的介绍，如果还有疑问，可以在文档底部留言。