定时器
setInterval()
-
定时调用可以将一个函数,每隔一段时间执行一次参数1. 回调函数,该函数每隔一段时间会被调用2. 每次调用间隔时间,单位是毫秒ms
返回值:返回一个Number类型的数据返回这个数字作为定时器的唯一标识 -
clearInterval()取消定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box, #box2 { width: 100px; height: 100px; position: absolute; } #box { background-color: blueviolet; top: 100px; } #box2 { background-color: plum; top: 300px; } </style> </head> <body> <button id="btnLeft">向左移动</button> <button id="btnRight">向右移动</button> <div id="box"></div> <div id="box2" style="left: 1000px;"></div> <script> // 获取按钮和元素 var box = document.getElementById("box"); var box2 = document.getElementById("box2"); var btnLeft = document.getElementById("btnLeft"); var btnRight = document.getElementById("btnRight"); // 为按钮绑定事件 //宽度->高度- >向左 btnLeft.onclick = function () { move(box,"width", 500, 10, function() { move(box,"height", 500, 10, function() { move(box,"left", 1000, 10, function() { alert("完成") }); }); }); } // 为按钮绑定向右事件 btnRight.onclick = function () { move(box2, "left", 8, 10, function() { // alert("wc") }); } /* 定时器函数移动 obj: 要执行动画的对象 attr:要变化的属性 target: 执行动画目标位置 speed: 移动速度(右移动正数, 左移动负数) callback : 回调函数 */ function move(obj, attr, target, speed, callback) { //清除之前的定时器 clearInterval(obj.timer); // 获取用户当前位置 var currentPosition = parseInt(getStyle(obj, attr)); console.log(currentPosition); // 判断速度 if (currentPosition > target) { speed = -speed; } // 设置定时器 obj.timer = setInterval(function () { // 获取原来位置 var oldValue = parseInt(getStyle(obj, attr)); // 设置新位置 var newValue = oldValue + speed; console.log(speed); console.log(newValue); // 判断位置 if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) { newValue = target; } // 设置元素位置 obj.style[attr] = newValue + "px"; // 结束,关闭定时器 if (newValue == target) { clearInterval(obj.timer) callback(); } }, 30); } //获取样式简洁版 function getStyle(obj, attr) { return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; } </script> </body> </html>
setTimeout()
- 延时调用
延时调用一个函数不马上执行,而是隔一段时间以后再执行,而且只执行一次