Aplicación de setTimeout en notas de aprendizaje de JavaScript

1(i) {
  
  +
  
    1
  10
}
2(j) {
  
  +
  1
    2
  10
}
12
23

1]

Cuando se llama a setTimeout(f, n), devuelve un ID de identificación y planea llamar a la función f en el futuro aproximadamente n milisegundos. La función f solo se ejecutará una vez (al implementar la ejecución recursiva se puede lograr la ejecución cada n milisegundos), basándose en la estrategia de temporización del motor JavaScript y en el modo de ejecución en un solo hilo, por lo que otros códigos de ejecución pueden bloquear este hilo. Por lo tanto, no se puede garantizar que la función se llame en el momento especificado por setTimeout. ¡Para evitar la bloqueo, se debe usar la función setTimeout dentro de la función de devolución de llamada!

JavaScript es asíncrono, setTimeout solo ejecutará la función de devolución de llamada una vez, pero setInterval ejecutará la función cada X milisegundos. Sin embargo, no se recomienda usar esta función. Cuando la ejecución de la función de devolución de llamada se bloquea, setInterval seguirá publicando más instrucciones de devolución de llamada. En intervalos de tiempo muy pequeños, esto puede llevar a que las funciones de devolución de llamada se acumulen.

setTimeout y setInterval también aceptan el primer parámetro como una cadena. Esta característica no debe usarse, ya que utiliza internamente eval oculto, ya que eval no se llama directamente en este caso, por lo que la cadena pasada a setTimeout se ejecutará desde el ámbito global, se recomienda no usar la forma de cadena para pasar parámetros a la función de devolución de llamada cuando se necesite pasar parámetros a la función de devolución de llamada; cuando se necesite pasar parámetros a la función de devolución de llamada, se puede crear una función anónima, y ejecutar la función de devolución de llamada real dentro de la función.

onscolll，onresize等是非常耗性能，那如果我们换成ajax请求的话，那么就会缩放一次窗口会连续触发多次ajax请求，下面我们试着使用函数节流的操作试试一下；当然加个settimeout()的定时器就好了，

第一种封装方法

var count = 0;
function oCount() {
  count++;
  console.log(count);
}
window.onresize = function () {
  delayFun(oCount)
};
function delayFun(method, thisArg) {
  clearTimeout(method.props);
  method.props = setTimeout(function () {
    method.call(thisArg)
  }, 200)
}

第二种封装方法

构造一个闭包，使用闭包的方式形成一个私有的作用域来存放定时器timer， timer是通过传参数的形式引入的。

var count = 0;
function oCount() {
  count++;
  console.log(count);
}
var funs= delayFun(oCount,100);
window.onresize = function () {
  funs()
};
function delayFun(func, wait) {
  var timer = null;
  return function () {
    var context = this;
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      func.apply(context, args);
    }, wait)
  };
}

对第二种方法优化一下，性能会更好

这里返回一个函数，如果它被不间断地调用，它将不会得到执行。该函数在停止调用 N 毫秒后，再次调用它才会得到执行。如果有传递 'immediate' 参数，会马上将函数安排到执行队列中，而不会延迟。

function delayFun (func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};
// Uso
var myEfficientFn = delayFun (function() {
  // Todas las operaciones pesadas
}, 250);
window.addEventListener('resize', myEfficientFn);

La función no permite que la función de callback se ejecute más de una vez en el tiempo especificado. Cuando se asigna una función de callback a un evento que se dispara con frecuencia, esta función es particularmente importante.

Si setTimeout es tan poderoso, ¿podemos usarlo en gran cantidad en el proyecto?

Personalmente no lo recomiendo, en nuestra industria, básicamente prohibimos el uso de setTimeout en la lógica del negocio, porque he visto muchos métodos que son difíciles de resolver, setTimeout como una forma de hack.

Por ejemplo, antes de que una instancia se haya inicializado, usamos esta instancia, la solución incorrecta es agregar setTimeout cuando se usa la instancia para asegurarse de que la instancia se inicialice primero.

¿Por qué está mal? Aquí es donde se utiliza el método de hack

Primero, ha sembrado una trampa, desordenando el ciclo de vida del módulo

Segundo, cuando ocurre un problema, setTimeout es realmente difícil de depurar.

Creo que la forma correcta de usarlo es ver el ciclo de vida (puede referirse a 'Acerca del ciclo de vida del software') y ejecutar la instanciación antes de usarla

Aquí termina todo el contenido del resumen de notas de aprendizaje de JavaScript que el editor les ha traído, espero que les haya sido útil y que nos apoyen más en el tutorial de alarido~