zoukankan      html  css  js  c++  java
  • js中的计时器事件`setTimeout()` 和 `setInterval()`

    js中的计时器事件

    在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件

    计时事件主要有两种:

    • setTimeout() ---- 间隔一定的时间之后执行
    • setInterval() ----每间隔一定的时间执行一次(重复性执行)

    setTimeout()

    间隔一定的时间之后`执行指定的语句或函数。
    例如:3s后跳转到前一个页面。

    <script type="text/javascript">
        setTimeout(function(){
                window.history.back();
        },3000);
    </script>
    

    也可以采用调用函数的方式

    function fn1(){
    			console.log("你好");
    		}
    		setTimeout(fn1,3000);
    

    需要注意的是,我们在上述代码中调用函数时调用的整个函数体,而不是函数执行后的结果fn1()

    setInterval()

    每隔一段时间执行一次指定的语句或函数,是个重复性的操作。
    实例1:每隔3s打印一次“hello”

    <script type="text/javascript">
        setTimeout(function(){
               console.log("hello");
        },3000);
    </script>
    

    实例2:显示当前时间,通过按钮实现时间的停止,开始

    <body>
        <h4 id="demo"></h4>
        <input type="button" onclick="startTimer()" value="开始">
        <input type="button" onclick="stopTimer()" value="停止">
    </body>
    
    <script type="text/javascript">
        var myVar;
        function startTimer(){ 
            /*setInterval() 间隔指定的毫秒数不停地执行指定的代码*/
            myVar=setInterval(function(){myTimer()},1000);
            }
        function myTimer()/* 定义一个得到本地时间的函数*/
        {
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("demo").innerHTML=t;
        }
        function stopTimer()
        {/* clearInterval() 方法用于停止 setInterval() 方法执行的函数代码*/
        clearInterval(myVar);
        }
        </script>
    

    如何执行停止呢?

    clearInterval() 方法用于停止 setInterval() 方法执行的函数代码.
    clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
    这里注意myVar必须是一个全局变量。实例如下:

    var myVar;
        function myFunction()
        {
        myVar=setTimeout(function(){alert("Hello")},3000);
        }
    
        function myStopFunction()
        {
        clearTimeout(myVar);
        }
    
  • 相关阅读:
    python的xpinyin模块:汉字转拼音
    中文报错SyntaxError: Non-UTF-8 code starting with 'xe6' in file
    "底层逻辑”是什么意思?
    【Golang】关于Go中logrus的用法
    【Golang】 关于Go语言中的锁
    【Golang】Go 通过结构(struct) 实现接口(interface)
    【Golang】Go语言之log的使用
    【Golang】Go中时间(time)的用法以及gorm处理时间戳
    【Golang】Go中三个点(...)用法
    一文彻底掌握Apache Hudi异步Clustering部署
  • 原文地址:https://www.cnblogs.com/hubufen/p/10888291.html
Copyright © 2011-2022 走看看