JavaScript-定时器方法 237

Java (3) 2024-09-08 18:23

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
JavaScript-定时器方法 237,希望能够帮助你!!!。

window对象中有两个定时器方法:1)setInterval 2)setTimeout 两个都是单线程的方法

1)setInterval

setInterval(code,time)持续的每隔一段时间执行指定的代码,单位是毫秒(1秒=1000毫秒)

参数1:要执行的代码(可以是代码或者方法) 参数2:间隔的毫秒数

停止定时器的方法是clearInterval(定时器id)因为setInterval也可以设定多个定时,所以clearInterval方法中的id是要指定清除那个定时器的标识即定时器的返回值

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>定时器</title>
    <script type="text/javascript">
        //执行代码的方式
        //方式1 直接书写执行的代码
        function startTimer() {
            setInterval('alert(new Date().toLocaleTimeString());', 1000);
        }
        //方式2 调用方法
        //注意:1 不用忘记小括号 2 建议加分号
        function startTimer() {
            setInterval('doSth();', 1000);
        }
        //方式3 直接书写方法名,方法名相当于一个变量
        function startTimer() {
            setInterval(doSth, 1000);
        }
        //要执行的方法
        function doSth() {
            alert(new Date().toLocaleTimeString());
        }
        //方式4 使用匿名方法  推荐! 推荐! 推荐! 
        //包括之后的绑定事件,JQuery中基本都是匿名方法
        function startTimer() {
            setInterval(function () {
                alert(new Date().toLocaleTimeString());
            }, 1000);
        }
    </script>
</head>
<body>
    <input type="button" onclick="startTimer();" value="开启定时器" />
</body>

例题:文本框中的值自增

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>定时器</title>
    <script type="text/javascript">
               var intervalId;//声明定时器id;
        function startTimer() {
            //获取文本框的值并转换为数值类型
            var num = parseInt(window.t1.value);//此处不转换也可以
            //在匿名方法中每隔1秒文本框值加1
          intervalId= setInterval(function () {
                num++;//每次自增1
                window.t1.value = num;//将自增后的值重新赋值给文本框
            }, 1000);
        }
        //停止定时器的运行
        function stopTimer() {
            clearInterval(intervalId);
        }
    </script>
</head>
<body>
    文本框<input type="text" value="0" id="t1" /><br /><br />
    <input type="button" onclick="startTimer();" value="开始自增" />
    <input type="button" onclick="stopTimer();" value="停止自增" />
</body>

2)setTimeout

setTimeout(code,time)超过多少时间只执行一次指定的代码,单位也是毫秒

参数1:要执行的代码(可以是代码或者方法) 参数2:超过多少的毫秒数

 function showTime() { setTimeout(function () { alert(new Date().toLocaleTimeString()); }, 1000); }

停止定时器的方法: clearTimeout(定时器id)

JavaScript-定时器方法 237_https://bianchenghao6.com/blog_Java_第1张

定时器

两个定时器很好区分:interval:间隔;timeout:超时

两个定时器的异同:

相同点: 都是每隔多少时间执行一段代码

不同点:

1) setInterval是持续的执行一段代码;setTimeout是只执行一次

2)停止定时器的方法名 1)setInterval的是clearInterval 2)setTimeout的是clearTimeout

注意:定义停止定时器的id时一定要将变量定义在事件(方法)外面

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

发表回复