• 技术文章 >web前端 >前端问答

    javascript里的定时器有哪些

    青灯夜游青灯夜游2021-11-26 18:04:27原创534

    javascript里的定时器有两种:1、单次定时器,使用setTimeout()方法定义,可以在规定时间(以毫秒计)过后执行一次代码块;2、循环定时器,使用setInterval()方法定义,按照指定的周期(以毫秒计)来重复执行某些代码。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    在 JavaScript 中,我们可以利用定时器来延迟执行某些代码,或者以固定的时间间隔重复执行某些代码。例如,您可以使用定时器定时更新页面中的广告或者显示一个实时的时钟等。

    JavaScript 中提供了两种定时器:setTimeout() 和 setInterval()

    方法说明
    setTimeout()在指定的时间后(单位为毫秒),执行某些代码,代码只会执行一次
    setInterval()按照指定的周期(单位为毫秒)来重复执行某些代码,定时器不会自动停止,除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口

    setTimeout()

    JS setTimeout() 函数用来在指定时间后执行某些代码,代码仅执行一次。

    使用方法:

    setTimeout(code,millisec)

    实例:

    <html>
    	<head>
    		<meta charset="utf-8" />
    	</head>
    	<body>
    		<button id="button" onclick="click1()">获取验证码</button>
    		<span id="span"></span>
    		<script>
    			var time = 10;
    			var num;
    			var button = document.getElementById("button");
    			var span = document.getElementById("span");
     
    			function click1() {
    				//click是关键字,所有函数名改为click1
    				if (time == 0) {
    					button.disabled = false;
    					time = 10;
    					span.innerHTML = "";
    					clearTimeout(num);
    				} else {
    					button.disabled=true;
    					span.innerHTML = time + "秒后重新获得返回值";
    					time--;
    					num = setTimeout("click1()",1000);
    				}
    			}
    		</script>
    	</body>
    </html>

    setInterval()

    JS setInterval() 函数可以定义一个能够重复执行的定时器,每次执行需要等待指定的时间间隔。

    使用方法:

    setInterval(code,millisec[,"lang"])

    实例:

    <html>
    	<head>
    		<meta charset="utf-8" />
    	</head>
    	<body>
    		<button id="button" onclick="set()">获取验证码</button>
    		<span id="span"></span>
    		<script>
    			var time = 10;
    			var num;
    			var button = document.getElementById("button");
    			var span = document.getElementById("span");
     
    			function set() {
    				num = setInterval("click()", 1000);
    				button.disabled = true;
    			}
     
    			function click() {
    				if (time == 0) {
    					button.disabled = false;
    					time = 10;
    					span.innerHTML = "";
    					clearInterval(num);
    				} else {
    					span.innerHTML = time + "秒后重新获得返回值"
    					time--;
    				}
    			}
    		</script>
    	</body>
    </html>

    【推荐学习:javascript高级教程

    以上就是javascript里的定时器有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:javascript是解释型还是编译型 下一篇:css里斜体样式代码是什么
    千万级数据并发解决方案

    相关文章推荐

    • JavaScript的函数是什么• javascript array怎么删除最后一个元素• Javascript中什么是数组• jquery是javascript吗
    1/1

    PHP中文网