欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

JavaScript如何使用setTimeout()设置定时器

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

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

JavaScript如何使用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>

js代码:

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

效果图:

JavaScript如何使用setTimeout()设置定时器

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>

效果图:

2.gif

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

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。 本文地址:http://itbyc.com/web/javascript/20713.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1