catalogue
Intermittent timer usage (countdown)
Encapsulation of motion function
timer
Timer classification
-
Delay timer: how long before execution (only once)
-
Application scenario: advertisement pop-up
-
-
Intermittent timer: it is executed once every few hours (it is always executed as long as it is not cleared)
-
Application scenario: rotation chart, countdown
-
Delay timer: generally, it supports a minimum value of 4ms
Intermittent timer: generally, it supports a minimum of 10ms
Timer setting
Delay timer
-
Basic syntax: setTimeout(fun,time)
-
fun: function, which can pass real name function or anonymous function
-
Time: time, in MS (omitted) 1s = 1000ms
-
setTimeout(function(){ console.log("Ha ha ha"); },3000); function test(){ console.log("Interesting"); } setTimeout(test,6000);
Use of delay timer
Display the picture in 3 seconds and click the close button to close it
<div> <img src="./img/11.jpg" alt=""> <span>X</span> </div> <script> var div = document.getElementsByTagName("div")[0]; var span = document.getElementsByTagName("span")[0]; // set timer setTimeout(function () { div.style.display = "block"; }, 3000); span.onclick = function () { div.style.display = "none"; } </script>
Intermittent timer
-
Basic syntax: setInterval(fun,time)
-
fun: function, which can pass real name function or anonymous function
-
Time: time, in MS (omitted) 1s = 1000ms
-
// Intermittent timer // Pass anonymous function setInterval(function(){ console.log("hello world"); },1000); // Pass real name function function test1(){ console.log("Hello"); } setInterval(test1,3000);
Intermittent timer usage (countdown)
The interface displays a ten second countdown
<span>10</span> <script> var span = document.getElementsByTagName("span")[0]; var n = 10; // set timer var timer = setInterval(function(){ n--; console.log(n); // judge if(n < 0){ n = 0; // The clearing timer will not execute the next time, and the contents of the function body will be executed this time clearInterval(timer); console.log("ha-ha"); } // assignment span.innerHTML = n; },1000); </script>
Timer clear
Clear delay timer
-
Basic syntax: clearTimeout(timerId);
-
timerId: the return value of the current timer, which is a unique value.
-
Clear intermittent timer
- Basic syntax: clearInterval(timerId);
- timerId: the return value of the current timer, which is a unique value.
var btns = document.getElementsByTagName("button"); // set timer var timer1 = setTimeout(function(){ console.log("Hahaha, I executed it in 5 seconds"); },5000); var timer2 = setInterval(function(){ console.log("Hello"); },2000); console.log(timer1,timer2); // Clear timer btns[0].onclick = function(){ clearTimeout(timer1); } btns[1].onclick = function(){ clearInterval(timer2); }
Encapsulation of motion function
Unidirectional uniform motion
// Get element var div = document.getElementsByTagName("div")[0]; var btn = document.getElementsByTagName("button")[0]; // Define a variable to hold the return value of the timer var timer = null; // Binding event div left 10 - > 1000 btn.onclick = function () { // Prevent the user from clicking multiple times and clear the timer before setting the timer clearInterval(timer); // set timer timer = setInterval(function () { // Get the current style value first. For the getStyle function encapsulation, see the previous rendering style in the article var curVal = parseFloat(getStyle(div, "left")); // Add a fixed value on the original basis each time var speed = curVal + 10; // Clear timer if (speed >= 1000) { // Re assign speed because speed may be greater than the target value speed = 1000; clearInterval(timer); } console.log(timer); // set up div.style.left = speed + 'px'; }, 50); } /* Purpose: get browser rendered styles @para:parameter eleObj:Element object attr:Style properties @return:Specific style values */ function getStyle(eleObj, attr) { // Judge compatibility if (eleObj.currentStyle) { //Under IE return eleObj.currentStyle[attr]; } else { //Non IE return getComputedStyle(eleObj)[attr]; } }
Repeated uniform motion
// Get element var div = document.getElementsByTagName("div")[0]; var btn = document.getElementsByTagName("button"); // Define a variable to hold the return value of the timer var timer = null; // Binding event div left 10 - > 1000 btn[0].onclick = function () { div.style.backgroundImage = "url('./img/right.gif')"; // Prevent the user from clicking multiple times and clear the timer before setting the timer clearInterval(timer); // set timer timer = setInterval(function () { // Get the current style value first var curVal = parseFloat(getStyle(div, "left")); // Add a fixed value on the original basis each time var speed = curVal + 10; //Target value reached clear timer if (speed >= 1000) { // Re assign speed because speed may be greater than the target value speed = 1000; clearInterval(timer); } // set up div.style.left = speed + 'px'; }, 50); } // 1000 -> 10 btn[1].onclick = function () { div.style.backgroundImage = "url('./img/left.gif')"; // Prevent the user from clicking multiple times and clear the timer first clearInterval(timer); // set timer timer = setInterval(function () { // Get the current style value first var curVal = parseFloat(getStyle(div, "left")); // Reduce a fixed value on the original basis each time var speed = curVal - 10; //Target value reached clear timer if (speed <= 10) { // Reassign speed speed = 10; } // set up div.style.left = speed + 'px'; }, 50); } </script>
Simple packaging
// Define a variable to hold the return value of the timer var timer = null; // Binding event div left 10 - > 1000 btn[0].onclick = function () { move(div, "left", 10, 1000); } // 1000 -> 0 btn[1].onclick = function () { move(div, "left", -10, 0); }
/* Function: uniform motion @para:parameter eleObj: Element object attr:Style properties step:step target:target value */ function move(eleObj, attr, step, target) { // Prevent the user from clicking multiple times and clear the timer first clearInterval(timer); // set timer timer = setInterval(function () { // Get the current style value first var curVal = parseFloat(getStyle(eleObj, attr)); // Add a fixed value on the original basis each time var speed = curVal + step; // Target value reached clear timer if ((speed >= target && step > 0) || (speed <= target && step < 0)) { // Reassign speed to the target value speed = target; // Clear timer clearInterval(timer); } // Set style values eleObj.style[attr] = speed + 'px'; }, 50); }
Improvement of packaging
// Binding event div left 10 - > 1000 btn[0].onclick = function () { move(div, "left", 10, 1000); } // 1000 -> 0 btn[1].onclick = function () { move(div, "left", 10, 0); }
/* Function: uniform motion @para:parameter eleObj: Element object attr:Style properties step:step target:target value */ function move(eleObj, attr, step, target) { // Judge the positive and negative of step size // If the initial value is less than the target value, step is positive, if the initial value is greater than the target value, step is negative step = parseFloat(getStyle(eleObj, attr)) < target ? step : -step; // Prevent the user from clicking multiple times and clear the timer first clearInterval(eleObj.timer); // Set the timer and save the return value of the timer on the custom attribute of the element eleObj.timer = setInterval(function () { // Get the current style value first var curVal = parseFloat(getStyle(eleObj, attr)); // Add a fixed value on the original basis each time var speed = curVal + step; if ((speed >= target && step > 0) || (speed <= target && step < 0)) { // Reassign speed to the target value speed = target; // Clear timer clearInterval(eleObj.timer); } // Set style values eleObj.style[attr] = speed + 'px'; }, 50); }