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

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

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

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

onscolll，onresize等是非常耗性能，那如果我們換成ajax請(qǐng)求的話，那么就會(huì)縮放一次窗口會(huì)連續(xù)觸發(fā)多次ajax請(qǐng)求，下面我們?cè)囍褂煤瘮?shù)節(jié)流的操作試試一下；當(dāng)然加個(gè)settimeout()的定時(shí)器就好了，

第一種封裝方法

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)造一個(gè)閉包，使用閉包的方式形成一個(gè)私有的作用域來(lái)存放定時(shí)器timer， timer是通過(guò)傳參數(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)
  };
}

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

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

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ù)在指定時(shí)間內(nèi)執(zhí)行多于一次。當(dāng)為一個(gè)會(huì)頻繁觸發(fā)的事件分配一個(gè)回調(diào)函數(shù)時(shí)，該函數(shù)顯得尤為重要。

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

我個(gè)人是不建議的，在我們業(yè)務(wù)中，基本上是禁止在業(yè)務(wù)邏輯中使用setTimeout的，因?yàn)槲宜吹降暮芏嗍褂梅绞蕉际且恍﹩?wèn)題不好解決，setTimeout作為一個(gè)hack的方式。

例如，當(dāng)一個(gè)實(shí)例還沒(méi)有初始化的前，我們就使用這個(gè)實(shí)例，錯(cuò)誤的解決辦法是使用實(shí)例時(shí)加個(gè)setTimeout，確保實(shí)例先初始化。

為什么錯(cuò)誤？這里其實(shí)就是使用hack的手段

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

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

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

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

最新評(píng)論