zoukankan      html  css  js  c++  java
  • js定时器

    定时器

    在js中有两种定时器:

    • 一次性定时器:setTimeout()

    • 周期性循环定时器: setInterval()

    setTimeout()

    只在指定的时间后执行一次

    <script type="text/javascript">
    			//定时器 异步运行  
    
    			function hello() {
    				alert("hello");
    			}
    			//使用方法名字执行方法  
    			var t1 = window.setTimeout(hello, 1000);
    			var t2 = window.setTimeout("hello()", 3000); //使用字符串执行方法  
    			window.clearTimeout(t1); //去掉定时器
    		</script>
    

     

    setInterval()

    在指定时间为周期循环执行

    /实时刷新  时间单位为毫秒  
    setInterval('refreshQuery()',8000);   
    /* 刷新查询 */  
    function refreshQuery(){  
      console.log('每8秒调一次') 
    }
    

      

    两种方法根据不同的场景和业务需求择而取之,

    对于这两个方法,需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,

    而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout

    定时器应用

    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box {
    				 100px;
    				height: 100px;
    				background-color: yellow;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="box">我的盒子</div>
    
    		<button id="clear">清除定时器</button>
    		<button id="start">开启定时器</button>
    		<script type="text/javascript">
    		
    			odiv = document.getElementById("box");
    			ostart = document.getElementById("start");
    			var num = 0;
    			let timer;
    
    			clearId = document.getElementById("clear");
    			clearId.onclick = function() {
    				clearInterval(timer);
    			}
    
    			ostart.onclick = function() {
    				//开启定时器,先清除原来的定时器
    				clearInterval(timer);
    				timer = setInterval(function() {
    					num++;
    					console.log(num)
    					odiv.style.marginLeft = (num * 1.5) + 'px'
    				}, 100)
    			}
    		</script>
    	</body>
    
    </html>
    

      

  • 相关阅读:
    owlcar 用法心得 自定义导航
    placeholder 颜色
    图片加载完后执行事件
    针对动态创建的数据添加事件
    弹窗(遮罩层)
    [iOS]把16进制(#871f78)颜色转换UIColor
    [AFN]AFNetworking错误总结
    [iOS]如何给Label或者TextView赋HTML数据
    [iOS]解决模拟器无法输入中文问题
    [iOS]开发者证书和描述文件的作用
  • 原文地址:https://www.cnblogs.com/xiao-apple36/p/10080312.html
Copyright © 2011-2022 走看看