• 技术文章 >web前端 >js教程

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

    青灯夜游青灯夜游2018-12-10 14:33:08原创3690
    在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>

    js代码:

    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>

    效果图:

    2.gif

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

    总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

    以上就是JavaScript如何使用setTimeout()设置定时器的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:Bootstrap是什么以及如何使用 下一篇:js如何实现动态倒计时效果
    大前端线上培训班

    相关文章推荐

    • 实例讲解JS中setTimeout()的用法_javascript技巧• JS中setTimeout()的用法详解_javascript技巧• js中的setTimeout()函数• JavaScript中setTimeout()的使用详解

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网