setTimeout ()
El método setTimeOut () se utiliza para especificar que se ejecuta una función o cadena después del número especificado de milisegundos. Devuelve un entero que representa el número del temporizador, que se puede pasar a ClearTimeOut () para cancelar la ejecución de esta función
En el siguiente código, la consola sale 0 primero, después de aproximadamente 1000 ms, es decir, 1s, se emite el valor de retorno del método de timer setTimeOut ().
var timer = setTimeOut (function () {console.log (temporizador);}, 1000); console.log (0);También se puede escribir como parámetros de cadena. Dado que este formulario hará que el motor JavaScript analice dos veces, reduciendo el rendimiento, no se recomienda usarlo.
VAR TIMER = SETTIMEOUT ('Console.log (temporizador);', 1000); console.log (0);Si se omite el segundo parámetro de SetTimeOut, el parámetro predetermina a 0
En el siguiente código, 0 y 1 aparecen en la consola, pero 0 está al frente, y esta pregunta se explicará más adelante.
var timer = setTimeOut (function () {console.log (temporizador);}); console.log (0);De hecho, además de los dos primeros parámetros, el método SetTimeOut () también permite agregar más parámetros, que se pasarán a la función en el temporizador.
En el siguiente código, la consola emitirá 2 después de aproximadamente 1000 ms, es decir, 1s. Sin embargo, el navegador IE9 solo permite que SetTimeout tenga dos parámetros, y no admite más parámetros. NAN se emitirá en la consola.
setTimeOut (función (a, b) {console.log (a+b);}, 1000,1,1);Puede usar la transferencia de parámetros IIFE para ser compatible con la transferencia de parámetros de la función del navegador IE9
setTimeOut ((function (a, b) {return function () {console.log (a+b);}}) (1,1), 1000);O escriba la función fuera del temporizador, y luego la función se llama con parámetros en la función anónima en el temporizador.
prueba de función (a, b) {console.log (a+b);} setTimeOut (function () {test (1,1);}, 1000);Esto apunta a
Las cuatro reglas de enlace señaladas por este mecanismo se han introducido en detalle en esta serie. Dado que esto en el temporizador se pierde implícitamente y es muy propenso a los errores, se explicará nuevamente aquí.
var a = 0; function foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeOut (obj.foo, 100); // 0 // equivalente a var a = 0; setTimeOut (function foo () {console.log (this.a);}, 100); // 0Si desea obtener el valor de la propiedad A en el objeto OBJ, puede colocar la función OBJ.Foo en una función anónima en el temporizador para la vinculación implícita.
var a = 0; function foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeOut (function () {obj.foo ();}, 100); // 2O puede usar el método de enlace para unir esto del método foo () a OBJ
var a = 0; function foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (obj.foo.bind (obj), 100); // 2ClearTimeOut ()
La función SetTimeOut devuelve un valor entero que representa el número de contador, pase el entero a la función ClearTimeOut, cancelando el temporizador correspondiente
// Después de 100 ms, la consola genera el valor de retorno del método setTimeout () 1Var temporizador = setTimeOut (function () {console.log (temporizador);}, 100);Por lo tanto, este valor se puede usar para cancelar el temporizador correspondiente
var timer = setTimeOut (function () {console.log (temporizador);}, 100); ClearTimeOut (temporizador);O use el valor de retorno directamente como parámetro
var timer = setTimeOut (function () {console.log (temporizador);}, 100); ClearTimeOut (1);En términos generales, el valor entero devuelto por SetTimeOut es continuo, es decir, el valor entero devuelto por el segundo método de setTimeout es 1 más grande que el primer valor entero.
// Salida de consola 1, 2, 3VAR Timer1 = setTimeOut (function () {console.log (timer1);}, 100); var timer2 = setTimeOut (function () {console.log (timer2);}, 100); var timer3 = setTimeOut (function () {console.log (timer3);}, 100);setInterval ()
El uso de SetInterval es exactamente el mismo que SetTimeout. La única diferencia es que SetInterval especifica que una tarea se ejecuta de vez en cuando, es decir, una ejecución cronometrada ilimitada
<botón id = "btn"> 0 </boton> <script> var timer = setInterval (function () {btn.innerhtml = number (btn.innerhtml) + 1;}, 1000); btn.onClick = function () {clearInterval (temporizador); btn.innerhtml = 0;} </script>[Nota] El estándar HTML5 estipula que el intervalo de tiempo más corto de SetTimeOut es de 4 milisegundos; El intervalo más corto de SetInterval es de 10 milisegundos, es decir, el intervalo de tiempo de menos de 10 milisegundos se ajustará a 10 milisegundos
La frecuencia de actualización de la mayoría de los monitores de computadora es de 60Hz, que es aproximadamente equivalente a volver a pintar 60 veces por segundo. Por lo tanto, el intervalo de bucle óptimo para el efecto de animación más suave es 1000 ms/60, que es aproximadamente igual a 16.6 ms
Para ahorrar energía, el navegador expande el intervalo de tiempo a 1000 milisegundos para páginas que no están en la ventana actual. Además, si la computadora portátil está alimentada por la batería, Chrome e IE 9 o superior cambiarán el intervalo de tiempo al temporizador del sistema, que es de aproximadamente 16.6 milisegundos
Mecanismo de operación
Expliquemos la parte anterior de la pregunta, ¿por qué 0 aparece 0 frente a 1 en el resultado de la consola del siguiente código?
setTimeOut (function () {console.log (1);}); console.log (0);De hecho, establecer el segundo parámetro de SetTimeOut en 0s no significa ejecutar la función de inmediato, sino simplemente poner la función en la cola de código.
En el siguiente ejemplo, un controlador de eventos se establece en un botón BTN. El controlador de eventos establece un temporizador para llamar después de 250 ms. Después de hacer clic en este botón, primero agregue el controlador de eventos OnClick a la cola. El temporizador se establece después de ejecutar el programa. Después de 250 ms, el código especificado se agrega a la cola y espere la ejecución.
btn.onClick = function () {setTimeOut (function () {console.log (1);}, 250);}Si el controlador de eventos OnClick en el código anterior se ha ejecutado durante 300 ms, el código del temporizador debe ejecutarse al menos 300 ms después de establecer el temporizador. Todo el código en la cola debe esperar hasta que el proceso de JavaScript esté inactivo, independientemente de cómo se agregan a la cola.
Como se muestra en la figura, aunque el código del temporizador se agregó a los 255 ms, no se puede ejecutar en este momento porque el controlador de eventos OnClick todavía se está ejecutando. El primer código del temporizador se puede ejecutar es a los 300 ms, es decir, después de que termine el controlador de eventos OnClick
Problema de SetInterval
El problema con el uso de setInterval () es que el código del temporizador puede no haberse ejecutado antes de que el código se agregue nuevamente a la cola nuevamente, lo que resulta en que el código del temporizador se ejecute varias veces seguidos sin ninguna pausa entre ellos. La solución a este problema del motor JavaScript es agregar el código del temporizador a la cola cuando se usa setInterval (). Esto asegura que el intervalo de tiempo mínimo para el código del temporizador que se agregará a la cola es el intervalo especificado
Sin embargo, esto puede conducir a dos problemas: 1. Algunos intervalos se omiten; 2. El intervalo entre la ejecución del código de múltiples temporizadores puede ser menor de lo esperado
Suponga que un determinado controlador de eventos OnClick establece un temporizador de intervalo de 200 ms usando serinterval (). Si el controlador de eventos tarda más de 300 ms en completarse, y el código del temporizador también lleva aproximadamente el mismo tiempo, se omitirá un cierto intervalo al mismo tiempo.
El primer temporizador en el ejemplo se agrega a la cola a los 205 ms, pero no se puede ejecutar hasta que hayan pasado 300 ms. Cuando se ejecuta este código de temporizador, se agrega otra copia a la cola a 405 ms. En el siguiente intervalo, 605 ms, el código del primer temporizador todavía se está ejecutando, y ya hay una instancia del código del temporizador en la cola. Como resultado, el código del temporizador en este momento no se agregará a la cola
Iterar settimeut
Para evitar el problema del temporizador setInterval (), puede usar la llamada setTimeOut () encadenada ()
setTimeOut (function fn () {setTimeOut (fn, intervalo);}, intervalo);Esta cadena de patrones llama a SetTimeOut (), y se crea un nuevo temporizador cada vez que se ejecuta la función. El segundo setTimeOut () llama a la función ejecutada actualmente y establece otro temporizador para ella. La ventaja de esto es que el nuevo código de temporizador no se inserta en la cola hasta que se ejecuta el código del temporizador anterior, asegurando que no hay intervalos faltantes. Además, asegura que antes de ejecutar el siguiente código del temporizador, al menos se debe esperar el intervalo especificado, evitando la operación continua.
Use setInterval ()
<div id = "myDiv" style = "altura: 100px; ancho: 100px; background-color: rosa; posición: absoluto; izquierda: 0;"> </div> <script> mydiv.onclick = function () {var timer = setInterval (function () {if (parseint (mydiv.style.tft)> 200) {clearval (tiempo temporal); falso;} myDiv.style.left = parseInt (myDiv.style.left) + 5 + 'Px'; } </script>Use setTimeOut encadenado ()
<div id = "myDiv" style = "altura: 100px; ancho: 100px; en segundo plano: rosa; posición: absoluto; izquierda: 0;"> </div> <script> mydiv.onclick = function () {setTimeOut (function fn () {if (parseint (mydiv.style.tft) <= 200) {setTimeout (fn, 16);} falso;} myDiv.style.left = parseInt (myDiv.style.left) + 5 + 'Px'; } </script>solicitud
Use temporizadores para ajustar la secuencia de eventos
[1] En el desarrollo web, un evento se produce primero en el elemento infantil y luego burbujea hasta el elemento principal, es decir, la función de devolución de llamada del evento del elemento infantil se activará antes de la función de devolución de llamada del evento del elemento principal. Si primero dejamos que la función de devolución de llamada de eventos del elemento principal ocurra primero, debemos usar SetTimeout (F, 0)
En circunstancias normales, haga clic en el elemento div, primero emergente 0, luego aparece 1
<div id = "myDiv" style = "altura: 100px; ancho: 100px; background-color: rosa;"> </div> <script> myDiv.onclick = function () {alert (0);} document.onClick = function () {alert (1);} </script>Si desea que el evento OnClick del documento ocurra primero, es decir, haga clic en el elemento Div, 1 aparecerá primero y luego saldrá 0. Luego haga la siguiente configuración
<div id = "myDiv" style = "Height: 100px; Width: 100px; Background-Color: Pink;"> </iv> <script> myDiv.onclick = function () {setTimeOut (function () {alerta (0);})} document.onclick = function () {alerta (1);} </scrito>【2】 Función de devolución de llamada definida por el usuario, generalmente activada antes de la acción predeterminada del navegador. Por ejemplo, si un usuario ingresa texto en el cuadro de entrada, el evento KeyPress se activará antes de que el navegador reciba el texto. Por lo tanto, la siguiente función de devolución de llamada no puede alcanzar su objetivo
<input type = "text" id = "myInput"> <script> myInput.OnKeyPress = function (event) {this.value = this.value.toupperperCase ();} </script>El código anterior quiere convertir los caracteres en capitalización inmediatamente después de que el usuario ingrese al texto. Pero, de hecho, solo puede convertir el personaje anterior en capitalización, porque el navegador no ha recibido el texto en este momento, por lo que este valor no puede obtener el último carácter de entrada.
Solo reescribirlo con SetTimout puede funcionar el código anterior
<input type = "text" id = "myInput"> <script> myInput.OnKeyPress = function (event) {setTimeOut (function () {myInput.Value = myInput.Value.ToUpperperCase ();});} </script>El código termina aquí. El próximo artículo te lo presentará
Serie Bom: requestanimationFrame
La tercera aplicación de temporizador de la serie BOM (reloj, cuenta regresiva, cronómetro y despertador)
Lo anterior es el primer temporizador SetTimeOut y SetInterval de la serie BOM presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!