大致介紹

成都創(chuàng)新互聯(lián)總部坐落于成都市區(qū)，致力網(wǎng)站建設服務有成都網(wǎng)站設計、成都網(wǎng)站建設、網(wǎng)絡營銷策劃、網(wǎng)頁設計、網(wǎng)站維護、公眾號搭建、重慶小程序開發(fā)公司、軟件開發(fā)等為企業(yè)提供一整套的信息化建設解決方案。創(chuàng)造真正意義上的網(wǎng)站建設，為互聯(lián)網(wǎng)品牌在互動行銷領域創(chuàng)造價值而不懈努力！

今天看了一篇文章，覺得寫得不錯，所以學習了一下，這篇博客是我自己的理解和總結

原文：你應該知道的 setTimeout 秘密

主要內容：

　1、setTimeout原理

　2、setTimeout(function(){..},0)的意義

　3、setTimeout的this指向和參數(shù)問題

setTimeout原理

先來看一段代碼：

var start = new Date();
 setTimeout(function(){
  console.log(new Date() - start);
 },500);
 while(new Date() - start <= 1000 ){}

最后輸出的是1003（可能數(shù)字不同，但是都大于1000）

之所以會輸出這樣的數(shù)，是因為執(zhí)行到setTimeout時，會把其中的代碼經(jīng)過500ms后放到執(zhí)行隊列中，但是之后執(zhí)行while循環(huán)，while循環(huán)會占據(jù)計算機資源，要占據(jù)1000ms，在這1000ms中執(zhí)行隊列中的任務都得等待，直到while循環(huán)結束

可以看出setTimeout的原理就是在經(jīng)過給定的時間后，將任務添加到隊列中，等待cpu調度執(zhí)行，它并不能保證任務在什么時候執(zhí)行

setTimeout(function(){..},0)的意義

有時候見過這樣的代碼：

 setTimeout(function(){
  //...........
 },0);

經(jīng)過前面的學習，我會以為是當代碼執(zhí)行到setTimeout時，會立即將任務添加到執(zhí)行隊列中。其實不然，雖然給定的延遲執(zhí)行時間是0，但是setTimeout有自己的最小延遲時間（根據(jù)瀏覽器的不同而不同），所以即使寫了0s，但是setTimeout還是會在最小延遲時間后才添加任務到執(zhí)行隊列中

設置為0s的作用是為了可以改變任務的執(zhí)行順序！因為瀏覽器會在執(zhí)行完當前任務隊列中的任務，再執(zhí)行setTimeout隊列中積累的的任務

例如：

window.onload = function(){
 document.querySelector('#one input').onkeydown = function(){
  document.querySelector('#one span').innerHTML = this.value;
 };
 document.querySelector('#two input').onkeydown = function(){
  setTimeout(function(){
  document.querySelector('#two span').innerHTML = document.querySelector('#two input').value;
  },0)
 }
 }

會產(chǎn)生這樣的問題：

可以發(fā)現(xiàn)采用第一種寫法時，只會獲取到鍵盤按下前，輸入框中的內容

產(chǎn)生問題的原因是當我們按下鍵盤時，JavaScript引擎會執(zhí)行keydown的事件處理程序，而更新輸入框中的值是在此之后執(zhí)行的，所以當獲取輸入框中的值（this.value）時，輸入框中的值還為更新。

解決方法就是利用setTimeout，在更新了輸入框的值后，在獲取它的值

setTimeout的this指向和參數(shù)問題

setTimeout中回調函數(shù)的this是指向window的

例如：

var a = 1;
 var obj = {
  a : 2,
  output : function(){
  setTimeout(function(){
   console.log(a);
  },0);
  }
 }
 obj.output(); //1

但我們可以利用apply()、call()和bind()來改變this的指向

在setTimeout通常是兩個參數(shù)，但是它可以由多個參數(shù)

例如：

 setTimeout(function(a,b){
  console.log(a); //2
  console.log(b); //4
  console.log(a + b); //6
 },0,2,4);

可以看到，這些多的參數(shù)就是回調函數(shù)中要傳入的參數(shù)

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持創(chuàng)新互聯(lián)！

文章名稱：setTimeout學習小結
轉載注明：http://www.rwnh.cn/article40/ipjpho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站設計公司、網(wǎng)站收錄、網(wǎng)站維護、App設計、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)