×

如何友好的使用setTimeout()来做一些应用

作者:Terry2019.08.01来源:Web前端之家浏览:9056评论:0
关键词:setTimeout

500.jpg

说好的10级台风呢,只是下了点暴雨而已,还是写篇文章先压压惊吧。

在JavaScript中,通过给setTimeout()方法设置需要调用的函数或要执行的代码串参数,和延迟的时间参数;在调用setTimeout()方法就可以设置一个简单的定时器。

在JS中,提供了一些原生方法来实现在设定的时间间隔之后去执行某一段代码;setTimeout()方法设置的是一次性定时器,是仅在指定的延迟时间之后触发一次。下面我们就来看看setTimeout()方法如何设置定时器。

setTimeout()方法

setTimeout():设置一次性定时器,在指定的毫秒数后调用函数或计算表达式;会在载入时延迟指定时间后,去执行一次表达式,仅执行一次。【相关视频教程推荐:JavaScript教程】

语法:

setInterval(code,millisec,lang);

参数说明:

code:必需的参数,表示需要调用的函数或要执行的代码串。

millisec:必须的参数,表示周期性执行或调用 “code参数”前的时间间隔,以毫秒为单位计时(1s=1000ms)。

lang 可选的参数。

setTimeout()方法的示例:

html代码:

<p>点击按钮,在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>

function myFunction()
{
    setTimeout(function(){alert("Hello")},3000);
}

setTimeout()设置无限循环的定时器

使用setTimeout()方法也可以实现无限循环的定时器,我们需要编写一个函数来调用其自身。此时setTimeout()方法会无限循环,如果想要停止定时器,就需要使用clearTimeout()方法。

clearTimeout()方法

clearTimeout():用来取消setTimeout()设置的定时器,在设置setTimeout()进行无限循环时使用。

语法:

clearTimeout(id_of_setTimeout);

参数说明:

id_of_setTimeout:表示由 setTimeout() 返回的 ID 值。

注:该值标识要取消的延迟调用的函数或延迟执行的代码串;

setTimeout()方法和clearTimeout()方法的联合示例

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i;
  function timedCount(){
    document.getElementById('txt').value=num;
    num=num+1;
    i=setTimeout(timedCount,1000);
  }
    setTimeout(timedCount,1000);
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>

可以看出,一开始setTimeout()设置的定时器在无限循环,使得input框中的数字在不断的增大,当按下Stop按钮后,就会调用clearTimeout()方法,停止setTimeout()定时器,数字就停止增加,保持为数字11。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/setTimeout465432132123.html

网友评论文明上网理性发言 已有0人参与

发表评论: