• setTimeout()和setInterval()小结


    写在前面:在写H5游戏时经常需要使用定时刷新页面实现动画效果,比较常用即setTimeout()以及setInterval()

    setTimeout

    描述

    setTimeout(code,millisec)
    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
    注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止

    参数 描述
    code 必需,要调用的函数后要执行的 JavaScript 代码串。
    millisec 必需,在执行代码前需等待的毫秒数。

    实现刷新

    setTimeout()用于延时调用指定函数,可以通过在函数中递归调用自身,实现反复调用。

    <!-- setTimeout递归调用实现计时器效果: -->
    <html>
    <head>
    	<script type="text/javascript">
    		var t=0;
    		function timer(){
    			document.getElementById("txt").value=t;
    			t++;
    			setTimeout("timer()",1000);
    		}
    	</script>
    </head>
    <body>
    	<p>setTimeout实现计时器效果</p>
    	<input type="text"id="txt">
    	<script>
    		timer();
    	</script>
    </body>
    </html>
    

    clearTimeout

    clearTimeout(id_of_settimeout)

    参数 描述
    id_of_settimeout 由 setTimeout() 返回的 ID 值。
    <!-- 调用clearTimeout()终止setTimeout() -->
    <html>
    <head>
    	<script type="text/javascript">
    		var t=0;
    		var flag;
    		function timer(){
    			document.getElementById("txt").value=t;
    			t++;
    			flag=setTimeout("timer()",1000);
    		}
    		function stop(){
    			clearTimeout(flag);
    		}
    	</script>
    </head>
    <body>
    	<p>setInterval实现计时器效果</p>
    	<input type="text"id="txt">
    	<input type="button" value="Stop" onclick="stop()">
    	<script>
    		timer();
    	</script>
    </body>
    </html>
    

    setTimeinterval

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

    参数 描述
    code 必需,要调用的函数或要执行的代码串。
    millisec 必需,周期性执行或调用code之间的时间间隔,以毫秒计。

    setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
    setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

    <html>
    <head>
    	<script type="text/javascript">
    		var t=0;
    		function timer(){
    			document.getElementById("txt").value=t;
    			t++;
    		}
    	</script>
    </head>
    <body>
    	<p>setInterval实现计时器效果</p>
    	<input type="text"id="txt">
    	<script type="text/javascript">
    		setInterval("timer()",1000);
    	</script>
    </body>
    </html>
    

    clearInterval

    clearInterval(id_of_setinterval)

    参数 描述
    id_of_setinterval 由setInterval()返回的ID值
    <!-- 调用clearInterval()终止setInterval() -->
    <html>
    <head>
    	<script type="text/javascript">
    		var t=0;
    		var flag;
    		function timer(){
    			document.getElementById("txt").value=t;
    			t++;
    		}
    	</script>
    </head>
    <body>
    	<p>setInterval实现计时器效果</p>
    	<input type="text"id="txt">
    	<script type="text/javascript">
    		flag=setInterval("timer()",1000);
    	</script>
    	<button onclick="window.clearInterval(flag)">Stop</button>
    </body>
    </html>
    

    总结

    两种方式,延时调用与周期调用,调用频率达到要求时(人眼无法识别超过30帧的动画,即刷新间隔时间应小于30.3ms),可在视觉上形成动画效果。但是现在写动画不再局限于这两个函数,有CSS3以及性能更优质的requestAnimationFrame()可以用。

    *参考:
    https://developer.mozilla.org/zh-CN/
    http://www.w3school.com.cn
    *

  • 相关阅读:
    php文件hash算法,秒传原理
    pytest-2:allure 的安装、使用
    python操作数据库(Mysql)
    python中OS常用方法
    Selenium2+python-unittest之装饰器(@classmethod)
    selenium中嵌套iframe的切换
    selenium3驱动IE浏览器设置
    selenium测试报告(含通过率统计图和失败截图)
    python3打包成exe---pyinstaller方法
    Python2图像文本识别
  • 原文地址:https://www.cnblogs.com/coderleon/p/4951071.html
Copyright © 2020-2023  润新知