setTimeou的t應(yīng)用

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

當 setTimeout(f,n) 被調(diào)用時，它會返回一個 ID 標識并且計劃在將來大約n毫秒后調(diào)用f函數(shù)。 f函數(shù)只會被執(zhí)行一次（遞歸執(zhí)行的話就可以實現(xiàn)每n毫秒執(zhí)行一次），基于 JavaScript 引擎的計時策略，以及本質(zhì)上的單線程運行方式，所以其它代碼的運行可能會阻塞此線程。 因此沒法確保函數(shù)會在 setTimeout 指定的時刻被調(diào)用。通過在回調(diào)函數(shù)內(nèi)部使用 setTimeout 函數(shù)來防止阻塞！

JavaScript 是異步的，setTimeout 只會執(zhí)行回調(diào)函數(shù)一次，不過 setInterval會每隔 X 毫秒執(zhí)行函數(shù)一次。 但是卻不鼓勵使用這個函數(shù)。當回調(diào)函數(shù)的執(zhí)行被阻塞時，setInterval 仍然會發(fā)布更多的回調(diào)指令。在很小的定時間隔情況下，這會導(dǎo)致回調(diào)函數(shù)被堆積起來。

setTimeout 和 setInterval 也接受第一個參數(shù)為字符串的情況。 這個特性絕對不要使用，因為它在內(nèi)部使用了隱藏的eval，由于 eval 在這種情況下不是被直接調(diào)用，因此傳遞到 setTimeout 的字符串會自全局作用域中執(zhí)行，建議不要在調(diào)用定時器函數(shù)時，為了向回調(diào)函數(shù)傳遞參數(shù)而使用字符串的形式；當需要向回調(diào)函數(shù)傳遞參數(shù)時，可以創(chuàng)建一個匿名函數(shù)，在函數(shù)內(nèi)執(zhí)行真實的回調(diào)函數(shù)；

onscolll，onresize等是非常耗性能，那如果我們換成ajax請求的話，那么就會縮放一次窗口會連續(xù)觸發(fā)多次ajax請求，下面我們試著使用函數(shù)節(jié)流的操作試試一下；當然加個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)
}

第二種封裝方法

構(gòu)造一個閉包，使用閉包的方式形成一個私有的作用域來存放定時器timer， timer是通過傳參數(shù)的形式引入的。

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

對第二種方法優(yōu)化一下，性能會更好

這里返回一個函數(shù)，如果它被不間斷地調(diào)用，它將不會得到執(zhí)行。該函數(shù)在停止調(diào)用 N 毫秒后，再次調(diào)用它才會得到執(zhí)行。如果有傳遞 ‘immediate' 參數(shù)，會馬上將函數(shù)安排到執(zhí)行隊列中，而不會延遲。

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

// 用法
var myEfficientFn = delayFun (function() {
  // 所有繁重的操作
}, 250);
window.addEventListener('resize', myEfficientFn);

函數(shù)不允許回調(diào)函數(shù)在指定時間內(nèi)執(zhí)行多于一次。當為一個會頻繁觸發(fā)的事件分配一個回調(diào)函數(shù)時，該函數(shù)顯得尤為重要。

setTimeout這么厲害，那么我們是可以在項目中大量使用嗎？

我個人是不建議的，在我們業(yè)務(wù)中，基本上是禁止在業(yè)務(wù)邏輯中使用setTimeout的，因為我所看到的很多使用方式都是一些問題不好解決，setTimeout作為一個hack的方式。

例如，當一個實例還沒有初始化的前，我們就使用這個實例，錯誤的解決辦法是使用實例時加個setTimeout，確保實例先初始化。

為什么錯誤？這里其實就是使用hack的手段

第一是埋下了坑，打亂模塊的生命周期

第二是出現(xiàn)問題時，setTimeout其實是很難調(diào)試的。

我認為正確的使用方式是，看看生命周期（可參考《關(guān)于軟件的生命周期 》），把實例化提到使用前執(zhí)行

以上就是小編為大家?guī)淼腏avaScript學(xué)習筆記整理_setTimeout的應(yīng)用的全部內(nèi)容了，希望對大家有所幫助，多多支持腳本之家~

最新評論