鍏充簬setTimeout()浣犳墍涓嶇煡閬撶殑鍦版柟

Posted 2020-08-07

鏍囩锛?/p>

鍓嶈█锛氱湅浜嗚繖绡囨枃绔狅紝1.娉ㄦ剰setTimeout寮曠敤鐨勬槸鍏ㄩ儴鍙橀噺杩樻槸灞€閮ㄥ彉閲忎簡锛屽綋鐩存帴璋冪敤澶栭儴鍑芥暟鏂规硶鏃讹紝瀹為檯涓婂嚱鏁板唴閮ㄧ殑鍙橀噺宸茬粡鍙樻垚鍏?灞€銆?.鎻愰啋鎴戦槻姝㈠嚭閿欑殑锛岀敤鍖垮悕鍑芥暟涓嶅鏄撳嚭閿欍€?.setTimeout鏈€蹇墽琛屾椂闂存槸4姣銆?.浣跨敤setTimeout鐨勫嚱鏁颁細姣斿綋鍓嶉槦鍒楃殑鍑?鏁版參鎵ц锛屽湪浠栦滑鐨勫悗闈€?.setTimeout涓殑瀹氭椂鍣ㄥ苟涓嶆槸鍑嗙‘鐨勬椂闂达紝瀹為檯涓畠闇€瑕佸湪鎵ц瀹屽墠闈㈢殑鍑芥暟鍚庢墠瀹氭椂鎵ц銆?/p>

浣犺繕鍙互鏌ラ槄鍏充簬setTimeout鐨勭浉鍏充粙缁?/a>

javascript鎻愪緵瀹氭椂鎵ц浠ｇ爜鐨勫姛鑳斤紝鍙仛瀹氭椂鍣紙timer锛夛紝涓昏鐢眘etTimeout()鍜宻etInterval()杩欎袱涓嚱鏁版潵瀹屾垚銆傚畠浠悜浠诲姟闃熷垪娣诲姞瀹氭椂浠诲姟銆傚垵濮嬫帴瑙﹀畠鐨勪汉閮借寰楀ソ绠€鍗曪紝瀹炴椂涓婄湡鐨勫姝や箞锛熻繖閲岃杞戒笅锛屼竴璺鍏朵娇鐢ㄥЭ鍔垮彉杩佺殑鍘嗙▼銆?/span>

1, setTimeout()鍩虹

setTimeout鍑芥暟鐢ㄦ潵鎸囧畾鏌愪釜鍑芥暟鎴栨煇娈典唬鐮侊紝鍦ㄥ灏戞绉掍箣鍚庢墽琛屻€傚畠杩斿洖涓€涓暣鏁帮紝琛ㄧず瀹氭椂鍣ㄧ殑缂栧彿锛屼互鍚庡彲浠ョ敤鏉ュ彇娑堣繖涓畾鏃跺櫒銆?/p>

var timerId = setTimeout(func|code, delay)

涓婇潰浠ｇ爜涓紝setTimeout鍑芥暟鎺ュ彈涓や釜鍙傛暟锛岀涓€涓弬鏁癴unc|code鏄皢瑕佹帹杩熸墽琛岀殑鍑芥暟鍚嶆垨鑰呬竴娈典唬鐮侊紝绗簩涓弬鏁癲elay鏄帹杩熸墽琛岀殑姣鏁般€?/p>

console.log(1);
setTimeout(鈥榗onsole.log(2)鈥?1000);
console.log(3);

涓婇潰浠ｇ爜鐨勮緭鍑虹粨鏋滃氨鏄?锛?锛?锛屽洜涓簊etTimeout鎸囧畾绗簩琛岃鍙ユ帹杩?000姣鍐嶆墽琛?濡傛灉杩欏湪Sublime涓嬭繍鐢ㄦ彃浠朵互nodejs鐜鏉ユ墽琛岋紝璁歌В閲婂櫒涓嶅悓锛屼細鎶ラ敊)銆?/p>

闇€瑕佹敞鎰忕殑鏄紝鎺ㄨ繜鎵ц鐨勪唬鐮佸繀椤讳互瀛楃涓茬殑褰㈠紡锛屾斁鍏etTimeout锛屽洜涓哄紩鎿庡唴閮ㄤ娇鐢╡val鍑芥暟锛屽皢瀛楃涓茶浆涓轰唬鐮併€傚鏋?strong>鎺ㄨ繜鎵ц鐨勬槸鍑芥暟锛屽垯鍙互鐩存帴灏嗗嚱鏁板悕锛屾斁鍏etTimeout銆備竴鏂归潰eval鍑芥暟鏈夊畨鍏ㄩ【铏戯紝鍙︿竴鏂归潰涓轰簡渚夸簬JavaScript寮曟搸浼樺寲浠ｇ爜锛宻etTimeout鏂规硶涓€鑸€绘槸閲囩敤鍑芥暟鍚嶇殑褰㈠紡锛屽氨鍍忎笅闈㈣繖鏍枫€?/span>

function func(){
  console.log(2);
}
setTimeout(func,1000);
// 鎴栬€?
setTimeout(function (){console.log(2)},1000);

setTimeout浼犲弬鏁?/strong>

褰撶劧涔熷彲浠ヤ娇鐢?strong>bind鎴?strong>apply鏂规硶鏉ヨВ鍐炽€?/p>

渚嬪浣跨敤bind鏂规硶锛屾妸澶氫綑鐨勫弬鏁扮粦瀹氬湪鍥炶皟鍑芥暟涓婇潰锛岀敓鎴愪竴涓柊鐨勫嚱鏁拌緭鍏etTimeout銆?/p>

setTimeout( function(arg1){}.bind(undefined, 10), 1000 );

涓婇潰浠ｇ爜涓紝bind鏂规硶绗竴涓弬鏁版槸undefined锛岃〃绀哄皢鍘熷嚱鏁扮殑this缁戝畾鍏ㄥ眬浣滅敤鍩燂紝绗簩涓弬鏁版槸瑕佷紶鍏ュ師鍑芥暟鐨勫弬鏁般€傚畠杩愯鍚庝細杩斿洖涓€涓柊鍑芥暟锛岃鍑芥暟涓嶅甫鍙傛暟銆?/p>

setTimeout娉ㄦ剰鐐?/strong>

绛旀鏄笉浼氥€傚洜涓?strong>setTimeout杩愯鏈哄埗璇磋繃锛屽繀椤昏绛夊埌褰撳墠鑴氭湰鐨勫悓姝ヤ换鍔″拰“浠诲姟闃熷垪”涓凡鏈夌殑浜?浠讹紝鍏ㄩ儴澶勭悊瀹屼互鍚庯紝鎵嶄細鎵цsetTimeout鎸囧畾鐨勪换鍔°€備篃灏辨槸璇达紝setTimeout鐨勭湡姝ｄ綔鐢ㄦ槸锛屽湪“浠诲姟闃熷垪”鐨勭幇鏈変簨浠剁殑鍚庨潰鍐嶆坊鍔犱竴涓?浜嬩欢锛岃瀹氬湪鎸囧畾鏃堕棿鎵ц鏌愭浠ｇ爜銆俿etTimeout娣诲姞鐨勪簨浠讹紝浼氬湪涓嬩竴娆vent Loop鎵ц銆?/p>

setTimeout(f,0)灏嗙浜屼釜鍙傛暟璁句负0锛屼綔鐢ㄦ槸璁ゝ鍦ㄧ幇鏈夌殑浠诲姟锛堣剼鏈殑鍚屾浠诲姟鍜?ldquo;浠诲姟闃熷垪”涓凡鏈夌殑浜嬩欢锛変竴缁撴潫灏辩珛鍒绘墽琛屻€備篃灏辨槸璇达紝setTimeout(f,0)鐨勪綔鐢ㄦ槸锛屽敖鍙兘鏃╁湴鎵ц鎸囧畾鐨勪换鍔°€?/p>

setTimeout(function (){
  console.log("浣犲ソ锛?);
}, 0);

涓婇潰浠ｇ爜鐨勫惈涔夋槸锛屽敖鍙兘鏃╁湴鏄剧ず“浣犲ソ锛?rdquo;銆?/p>

setTimeout(f,0)鎸囧畾鐨勪换鍔★紝鏈€鏃╀篃瑕佸埌涓嬩竴娆vent Loop鎵嶄細鎵ц銆傝鐪嬩笅闈㈢殑渚嬪瓙銆?/p>

setTimeout(function() {
  console.log("Timeout");
}, 0);

function a(x) {
  console.log("a() 寮€濮嬭繍琛?);
  b(x);
  console.log("a() 缁撴潫杩愯");
}

function b(y) {
  console.log("b() 寮€濮嬭繍琛?);
  console.log("浼犲叆鐨勫€间负" + y);
  console.log("b() 缁撴潫杩愯");
}

console.log("褰撳墠浠诲姟寮€濮?);
a(42);
console.log("褰撳墠浠诲姟缁撴潫");

// 褰撳墠浠诲姟寮€濮?
// a() 寮€濮嬭繍琛?
// b() 寮€濮嬭繍琛?
// 浼犲叆鐨勫€间负42
// b() 缁撴潫杩愯
// a() 缁撴潫杩愯
// 褰撳墠浠诲姟缁撴潫
// Timeout

涓婇潰浠ｇ爜璇存槑锛宻etTimeout(f,0)蹇呴』瑕佺瓑鍒板綋鍓嶈剼鏈殑鎵€鏈夊悓姝ヤ换鍔＄粨鏉熷悗鎵嶄細鎵ц銆?/p>

0姣瀹為檯涓婅揪涓嶅埌鐨勩€傛牴鎹?a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers" target="_blank">HTML5鏍囧噯锛宻etTimeOut鎺ㄨ繜鎵ц鐨勬椂闂达紝鏈€灏戞槸4姣銆傚鏋滃皬浜庤繖涓€硷紝浼氳鑷姩澧炲姞鍒?銆傝繖鏄负浜嗛槻姝㈠涓?strong>setTimeout(f,0)璇彞杩炵画鎵ц锛岄€犳垚鎬ц兘闂銆?/p>

鍙︿竴鏂归潰锛屾祻瑙堝櫒鍐呴儴浣跨敤32浣嶅甫绗﹀彿鐨勬暣鏁帮紝鏉ュ偍瀛樻帹杩熸墽琛岀殑鏃堕棿銆傝繖鎰忓懗鐫€setTimeout鏈€澶氬彧鑳芥帹杩熸墽琛?147483647姣 锛?4.8澶╋級锛岃秴杩囪繖涓椂闂翠細鍙戠敓婧㈠嚭锛屽鑷村洖璋冨嚱鏁板皢鍦ㄥ綋鍓嶄换鍔￠槦鍒楃粨鏉熷悗绔嬪嵆鎵ц锛屽嵆绛夊悓浜巗etTimeout(f,0)鐨勬晥鏋溿€?/p>

4, setTimeout(f,0)搴旂敤

璋冩暣浜嬩欢鐨勫彂鐢熼『搴?/strong>

鍙︿竴涓娇鐢ㄨ繖绉嶆妧宸х殑渚嬪瓙鏄紝浠ｇ爜楂樹寒鐨勫鐞嗐€傚鏋滀唬鐮佸潡寰堝ぇ锛屽氨浼氬垎鎴愪竴涓釜灏忓潡锛屽啓鎴愯濡?strong>setTimeout(highlightNext, 50)鐨勬牱瀛愶紝杩涜鍒嗗潡澶勭悊銆?/p>

5, clearTimeout()

setTimeout鍜宻etInterval鍑芥暟锛岄兘杩斿洖涓€涓〃绀鸿鏁板櫒缂栧彿鐨勬暣鏁板€硷紝灏嗚鏁存暟浼犲叆clearTimeout鍜宑learInterval鍑芥暟锛屽氨鍙互鍙栨秷瀵瑰簲鐨勫畾鏃跺櫒銆?/p>

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

setTimeout鍜宻etInterval杩斿洖鐨勬暣鏁板€兼槸杩炵画鐨?涓€瀹氱幆澧冧笅锛屾瘮濡傛祻瑙堝櫒鎺у埗鍙帮紝鎴栬€?span class="wp_keywordlink">js鎵ц鐜绛?锛屼篃灏辨槸璇达紝绗簩涓猻etTimeout鏂规硶杩斿洖鐨勬暣鏁板€硷紝灏嗘瘮绗竴涓殑鏁存暟鍊煎ぇ1銆傚埄鐢ㄨ繖涓€鐐癸紝鍙互鍐欎竴涓嚱鏁帮紝鍙栨秷褰撳墠鎵€鏈夌殑setTimeout銆?/span>

(function() {
  var gid = setInterval(clearAllTimeouts, 0);

  function clearAllTimeouts() {
    var id = setTimeout(function() {}, 0);
    while (id > 0) {
      if (id !== gid) {
        clearTimeout(id);
      }
      id--;
    }
  }
})();

杩愯涓婇潰浠ｇ爜鍚庯紝瀹為檯涓婂啀璁剧疆浠讳綍setTimeout閮芥棤鏁堜簡銆?/p>

涓嬮潰鏄竴涓猚learTimeout瀹為檯搴旂敤鐨勪緥瀛愩€傛湁浜涚綉绔欎細瀹炴椂灏嗙敤鎴峰湪鏂囨湰妗嗙殑杈撳叆锛岄€氳繃Ajax鏂规硶浼犲洖鏈嶅姟鍣紝jQuery鐨勫啓娉曞涓嬨€?/span>

$(鈥榯extarea鈥?.on(鈥榢eydown鈥? ajaxAction);

杩欐牱鍐欐湁涓€涓緢澶х殑缂虹偣锛屽氨鏄鏋滅敤鎴疯繛缁嚮閿紝灏变細杩炵画瑙﹀彂 keydown 浜嬩欢锛岄€犳垚澶ч噺鐨凙jax閫氫俊銆傝繖鏄笉蹇呰鐨勶紝鑰屼笖寰堝彲鑳戒細鍙戠敓鎬ц兘闂銆傛纭殑鍋氭硶搴旇鏄紝璁剧疆涓€涓棬妲涘€硷紝琛ㄧず涓ゆAjax閫氫俊鐨勬渶灏忛棿闅旀椂闂淬€傚鏋?鍦ㄨ瀹氱殑鏃堕棿鍐咃紝鍙戠敓鏂扮殑keydown浜嬩欢锛屽垯涓嶈Е鍙慉jax閫氫俊锛屽苟涓旈噸鏂板紑濮嬭鏃躲€傚鏋滆繃浜嗘寚瀹氭椂闂达紝娌℃湁鍙戠敓鏂扮殑keydown浜嬩欢锛屽皢杩涜 Ajax閫氫俊灏嗘暟鎹彂閫佸嚭鍘汇€?/p>

杩欑鍋氭硶鍙仛debounce锛堥槻鎶栧姩锛夋柟娉曪紝鐢ㄦ潵杩斿洖涓€涓柊鍑芥暟銆傚彧鏈夊綋涓ゆ瑙﹀彂涔嬮棿鐨勬椂闂撮棿闅斿ぇ浜庝簨鍏堣瀹氱殑鍊硷紝杩欎釜鏂板嚱鏁版墠浼氳繍琛屽疄闄呯殑浠诲姟銆傚亣瀹氫袱娆jax閫氫俊鐨勯棿闅斾笉灏忎簬2500姣锛屼笂闈㈢殑浠ｇ爜鍙互鏀瑰啓鎴愪笅闈㈣繖鏍枫€?/p>

$(鈥榯extarea鈥?.on(鈥榢eydown鈥? debounce(ajaxAction, 2500))

鍒╃敤setTimeout鍜宑learTimeout锛屽彲浠ュ疄鐜癲ebounce鏂规硶銆傝鏂规硶鐢ㄤ簬闃叉鏌愪釜鍑芥暟鍦ㄧ煭鏃堕棿鍐呰瀵嗛泦璋冪敤锛屽叿浣撴潵璇达紝debounce鏂规硶杩斿洖涓€涓柊鐗堢殑璇ュ嚱鏁帮紝杩欎釜鏂扮増鍑芥暟璋冪敤鍚庯紝鍙湁鍦ㄦ寚瀹氭椂闂村唴娌℃湁鏂扮殑璋冪敤锛屾墠浼氭墽琛岋紝鍚﹀垯灏遍噸鏂拌鏃躲€?/p>

function debounce(fn, delay){
  var timer = null; // 澹版槑璁℃椂鍣?
  return function(){
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function(){
      fn.apply(context, args);
    }, delay);
  };
}

// 鐢ㄦ硶绀轰緥
var todoChanges = debounce(batchLog, 1000);
Object.observe(models.todo, todoChanges);

鐜板疄涓紝<span style="color:#ed1941">鏈€濂戒笉瑕佽缃お澶氫釜setTimeout鍜宻etInterval</span>锛屽畠浠?strong>鑰楄垂CPU銆傛瘮杈冪悊鎯崇殑鍋氭硶鏄紝灏嗚鎺ㄨ繜鎵ц鐨勪唬鐮侀兘鏀惧湪涓€涓嚱鏁伴噷锛岀劧鍚庡彧瀵硅繖涓嚱鏁颁娇鐢╯etTimeout鎴杝etInterval銆?/p>

6, 濡備綍浣跨敤setTimeout

瀵?strong>setTimeout鑷劧涓嶆浜庤繖浜涳紝浣嗗凡瓒宠鍏跺己澶с€傞偅涔堥棶棰樻潵浜嗭紝闇€瑕佸湪椤圭洰涓ぇ閲忎娇鐢ㄤ箞锛熻涓汉鍜岄」鐩?鑰屽畾鍚э紱濡備笉鑳界啛缁冩帉鎻★紝涓嶅缓璁鐢ㄣ€傛瘯绔熷湪鏌愪簺鎯呮櫙涔嬩笅锛宻etTimeout浣滀负涓€涓猦ack鐨勬柟寮忚€屽瓨鍦ㄧ殑锛堟墦涔辨ā鍧楃殑鐢熷懡鍛ㄦ湡锛屽苟涓斿湪闂鍑虹幇鏃?寰堥毦璋冭瘯锛屼綘鎳傜殑锛夛紝璀锛氬綋涓€涓疄渚嬭繕娌℃湁鍒濆鍖栫殑鍓嶏紝鎴戜滑灏变娇鐢ㄨ繖涓疄渚嬶紝閿欒鐨勮В鍐冲姙娉曟槸浣跨敤瀹炰緥鏃跺姞涓猻etTimeout锛岀‘淇濆疄渚嬩娇鐢ㄥ墠宸插垵 濮嬪寲銆?/p>

浣嗗彧瑕佽冻澶?strong>鐔熸倝瀹冿紝浠ュ強浣跨敤鐨勫満鏅?鍖呮嫭妯″潡鐢熷懡鍛ㄦ湡)锛屼娇鐢ㄥ畠涔熷氨鏃犲彲鍘氶潪浜嗐€傛瘮濡倁nderscore涓笉灏戞柟娉曚篃鏄熀浜庤繖setTimeout鏂规硶鍐欑殑锛涙瘮濡傞潪甯稿己澶х殑_.defer锛?寤惰繜璋冪敤function鐩村埌褰撳墠璋冪敤鏍堟竻绌轰负姝紝绫讳技浣跨敤寤舵椂涓?鐨剆etTimeout鏂规硶銆傚浜庢墽琛屽紑閿€澶х殑璁＄畻鍜屾棤闃诲UI绾跨▼鐨凥TML娓叉煋鏃?鍊欓潪甯告湁鐢ㄣ€?濡傛灉浼犻€抋rguments鍙傛暟锛屽綋鍑芥暟function鎵ц鏃讹紝 arguments 浼氫綔涓哄弬鏁颁紶鍏ャ€?/p>

涔熸瘮濡傚墠鏂囨彁鍒扮殑闃叉姈鍔ㄦ柟娉昫ebounce锛涘湪underscore涓紙_.debounce(function, wait, [immediate])锛夊叾瀹炵幇鏂规硶濡備笅锛?/p>

  _.debounce = function(func, wait, immediate) {
    var timeout, args, context, timestamp, result;

    var later = function() {
      var last = _.now() - timestamp;

      if (last < wait && last >= 0) {
        timeout = setTimeout(later, wait - last);
      } else {
        timeout = null;
        if (!immediate) {
          result = func.apply(context, args);
          if (!timeout) context = args = null;
        }
      }
    };

    return function() {
      context = this;
      args = arguments;
      timestamp = _.now();
      var callNow = immediate && !timeout;
      if (!timeout) timeout = setTimeout(later, wait);
      if (callNow) {
        result = func.apply(context, args);
        context = args = null;
      }

      return result;
    };
  };

鍙傝€冩枃绔犻摼鎺ワ細
闃竴宄?娴忚鍣ㄥ璞?瀹氭椂鍣?/a>
浣犳墍涓嶄簡瑙ｇ殑setTimeout