JS定时调用和延时调用

最新推荐文章于 2025-06-06 16:03:06 发布

原创最新推荐文章于 2025-06-06 16:03:06 发布 · 3.4k 阅读

5 ·

CC 4.0 BY-SA版权

前端端端端端端同时被 2 个专栏收录

59 篇文章

订阅专栏

JavaScript

20 篇文章

订阅专栏

##定时调用
setInterval()
定时调用，将一个函数每隔一段时间执行一次
需要两个参数：1）回调函数
2）间隔时间（单位：毫秒）
这个方法会返回一个Number类型的数据，这个数字用来作为一个定时器的唯一标识。

clearInterval()
关闭定时器，需要一个定时器标识作为参数。他可以接受任何类型的参数，若参数是有效的定时器标识，则停止定时器；若无效，则不作任何行为。

切换图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#img1{
				width:670px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var img01 = document.getElementById("img1");
				var start = document.getElementById("start");
				var stop = document.getElementById("stop");
				//创建一个变量存放定时器标识
				var timer;
				
				//为开始按钮绑定一个单击响应函数
				start.onclick = function(){
					//先关闭上一次的定时器
					clearInterval(timer);
					
					//创建一个数组存放img
					var imgArr = ["img/william/01.jpg","img/william/02.jpg","img/william/03.jpg","img/william/04.jpg"];
					//创建索引
					var index = 0;
					//创建定时调用
					timer = setInterval(function(){
						index++;
						index = index % imgArr.length;
						//切换图片
						img01.src = imgArr[index];
					}, 1000);
				};
				
				//为结束按钮绑定一个单击响应函数
				stop.onclick = function(){
					clearInterval(timer);
				};
			};
			
		</script>
		
	</head>
	<body>
		<img id="img1" src="img/william/01.jpg" />
		<br /> <br />
		<button id="start">开始</button>
		<button id="stop">停止</button>
	</body>
</html>

###优化键盘事件div移动的卡顿

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				//定义一个速度变量
				var speed = 10;
				//定义一个变量存放方向
				var dir = 0;
				setInterval(function(){
					//console.log(event.keyCode);
					//←：37 ↑：38 →：39 ↓：40
					switch(dir){
						case 37:
							box1.style.left = box1.offsetLeft - speed +"px";
							//alert("zuo");
							break;
						case 38:
							box1.style.top = box1.offsetTop - speed +"px";
							break;
						case 39:
							box1.style.left = box1.offsetLeft + speed +"px";
							break;
						case 40:
							box1.style.top = box1.offsetTop + speed +"px";
							break;
					}
				}, 30);
				//定义键盘按下事件
				document.onkeydown = function(event){
					event = event || window.event ;
					//当按下Ctrl键时，速度变快
					if(event.ctrlKey){
						speed = 100;
					}else{
						speed = 10;
					}
					//给dir赋值（方向
					dir = event.keyCode;
				};
				
				//键盘松开
				document.onkeyup = function(){
					//取消方向
					dir = 0;
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

###移动div一些操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				top: 150px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				var btn1 = document.getElementById("btn1");
				var test = document.getElementById("test");
				var box = document.getElementById("box");
				var box1 = document.getElementById("box1");
				//创建一个变量存储定时器的标识
				//var timer;
				//为btn绑定一个单击响应函数
				btn.onclick = function(){
					move(box ,"left", 800 , 17);
				};
				btn1.onclick = function(){
					move(box , "left" ,0 , 19);
				};
				
				test.onclick = function(){
					//move(box1 , "width" , 800 , 10);
					move(box1 , "width" , 800 , 10 , function(){
						move(box1 , "height" , 800 , 10 ,function(){
							move(box1 , "height" , 400 , 10);
						});
					});
				};
				//创建一个move函数
				/*  obj 移动的对象  
				 * 	attr 改变的样式
				 *  target移动的最终位置
				 *  speed 移动速度
				 *  callback 回调函数
				 */
				function move(obj , attr , target , speed , callback){
					//关闭当前的上一个定时器
					clearInterval(obj.timer);
					//获取当前样式
					var current = parseInt(getStyle(obj , attr)) ;
					//判断速度的方向
					if(current > target){
						speed = -speed;
					}
					//创建一个定时器
					obj.timer = setInterval(function(){						
						//获取当前样式
						var oldValue = parseInt(getStyle(obj ,attr)) ;
						//alert(oldValue);
						var newValue = oldValue + speed;
						//要求当移动到target时停止移动
						if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)){
							newValue = target;
						}
						//修改样式
						obj.style[attr] = newValue + "px";
						
						//当移动到800停止
						if(newValue == target){
							clearInterval(obj.timer);
							callback && callback();
						}
					},30);
				};
				//创建一个函数用来获取当前元素的样式
				function getStyle( obj , name ){
					if(window.getComputedStyle){
						return getComputedStyle(obj , null)[name];
					}else{
						return obj.currentStyle[name];
					}
				};
			};
		</script>
	</head>
	<body>
		<button id="btn">点击我向右移动</button>
		<button id="btn1">点击我向左移动</button>
		<button id="test">测试按钮</button>
		<br /><br />
		<div id="box"></div>
		<div id="box1"></div>
		<div style="width: 0; height: 1000px; border-left:1px solid black ; left: 800px; top:0; position: absolute;"></div>
	</body>
</html>

这里写图片描述