Applicazione di setTimeout negli appunti di studio JavaScript

setTimeou的t应用

var ids = [];
function foo1(i) {
  this.i = i;
  console.log('i = '+i);
  ids[0] = setTimeout((function () {
    foo1(i);
  }),1000);
}
function foo2(j) {
  this.j = j;
  console.log('j = '+j);
  ids[1] = setTimeout((function () {
    foo2(j);
  }),1000);
}
foo1(2);
foo2(3);
clearTimeout(ids[0]);
clearTimeout(ids[1]);

Quando viene chiamato setTimeout(f, n), restituisce un ID identificativo e pianifica di chiamare la funzione f in futuro circa n millisecondi. La funzione f viene eseguita una volta sola (con esecuzione ricorsiva può essere realizzata ogni n millisecondi), basata sulla strategia di temporizzazione del motore JavaScript e sul modo essenziale di esecuzione single-thread, quindi il funzionamento di altri codici potrebbe bloccare questo thread. Pertanto, non si può garantire che la funzione venga chiamata al momento specificato da setTimeout. Per prevenire il blocco, utilizzare setTimeout nella funzione di callback!

JavaScript è asincrono, setTimeout esegue la funzione di callback una volta, ma setInterval esegue la funzione ogni X millisecondi. Tuttavia, non si incoraggia l'uso di questa funzione. Quando la funzione di callback viene bloccata, setInterval invierà ulteriori istruzioni di callback. In casi di intervallo di tempo molto piccolo, questo può portare a un accumulo di funzioni di callback.

setTimeout e setInterval accettano anche il primo argomento come stringa. Questa caratteristica non dovrebbe essere utilizzata, poiché internamente utilizza eval nascosto, quindi le stringhe passate a setTimeout vengono eseguite dallo scope globale; è consigliabile non utilizzare la forma di stringa per passare parametri alla funzione di callback quando si deve passare parametri alla funzione di callback, si può creare una funzione anonima, eseguire la funzione di callback reale all'interno della funzione;

onscolll e onresize sono molto consumatori di risorse, quindi se li sostituiamo con richieste AJAX, allora il riquadro viene ridimensionato una volta e vengono attivati più volte richieste AJAX consecutive; proviamo a utilizzare l'operazione di limitazione della frequenza della funzione di seguito; ovviamente, aggiungere un timer di setTimeout() funziona bene,

Primo metodo di封装

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)
}

Secondo metodo di封装

Costruire una closure, utilizzare il metodo di closure per formare un'area di scope privata per memorizzare il timer timer, il quale viene introdotto tramite parametri.

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)
  };
}

Ottimizza il secondo metodo, migliora le prestazioni

Questa funzione restituisce una funzione che non viene eseguita se chiamata consecutivamente. La funzione viene nuovamente eseguita dopo che sono trascorsi N millisecondi dall'ultima chiamata. Se viene passato il parametro 'immediate', la funzione viene immediatamente aggiunta alla coda di esecuzione senza ritardo.

function delayFun (func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      se (!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() {
  // Tutte le operazioni pesanti
}, 250);
window.addEventListener('resize', myEfficientFn);

La funzione non permette che una callback funzioni più di una volta nel periodo di tempo specificato. Quando si assegna una callback a un evento che si verifica frequentemente, questa funzione è particolarmente importante.

Se setTimeout è così potente, possiamo usarlo in gran quantità nei nostri progetti?

Personalmente non lo consiglio, nella nostra logica aziendale, praticamente è proibito usare setTimeout nella logica aziendale, perché molte delle modalità che ho visto sono problematiche da risolvere, setTimeout è un metodo di hack.

Ad esempio, quando un'istanza non è ancora stata inizializzata, usiamo questa istanza, la soluzione errata è aggiungere setTimeout all'uso dell'istanza per assicurarsi che l'istanza sia inizializzata prima.

Perché è sbagliato? Ecco che si usa un metodo di hack

Il primo è che ha lasciato una trappola, rompendo il ciclo di vita del modulo

Il secondo è che quando si verificano problemi, setTimeout è abbastanza difficile da debuggare.

Penso che il modo corretto di usarlo sia di guardare il ciclo di vita (si può fare riferimento a 'Sull ciclo di vita del software' ), spostare l'istanziazione prima dell'uso

Questo è tutto il contenuto del tutorial JavaScript che ho raccolto per voi, spero che sia utile e vi supporti, sostenete il tutorial di urlania~