JavaScript-定时器方法 237

JavaScript-定时器方法 237window对象中有两个定时器方法:1)setInterval 2)setTimeout 两个都是单线程的方法1)setIntervalsetInterval(code,time)持续的每隔一段时间执行指定的代码,单位是毫秒(1秒=1000

大家好,欢迎来到IT知识分享网。

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

定时器

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

两个定时器的异同:

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

不同点:

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

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

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/87419.html

(0)
上一篇 2024-10-09 14:26
下一篇 2024-10-09 17:33

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信