setTimeout學(xué)習(xí)小結(jié)

大致介紹

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

今天看了一篇文章，覺得寫得不錯(cuò)，所以學(xué)習(xí)了一下，這篇博客是我自己的理解和總結(jié)

原文：你應(yīng)該知道的 setTimeout 秘密

主要內(nèi)容：

　1、setTimeout原理

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

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

setTimeout原理

先來(lái)看一段代碼：

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

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

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

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

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

有時(shí)候見過(guò)這樣的代碼：

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

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

設(shè)置為0s的作用是為了可以改變?nèi)蝿?wù)的執(zhí)行順序！因?yàn)闉g覽器會(huì)在執(zhí)行完當(dāng)前任務(wù)隊(duì)列中的任務(wù)，再執(zhí)行setTimeout隊(duì)列中積累的的任務(wù)

例如：

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

會(huì)產(chǎn)生這樣的問(wèn)題：

setTimeout學(xué)習(xí)小結(jié)

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

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

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

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

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

例如：

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

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

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

例如：

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

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

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！

文章名稱：setTimeout學(xué)習(xí)小結(jié)
轉(zhuǎn)載注明：http://muchs.cn/article40/ipjpho.html

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

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

猜你還喜歡下面的內(nèi)容