今天就跟大家聊聊有關(guān)JavaScript中怎么利用setTimeout防止循環(huán)超時(shí),可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
尉犁網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),尉犁網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為尉犁近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)要多少錢(qián),請(qǐng)找那個(gè)售后服務(wù)好的尉犁做網(wǎng)站的公司定做!
JS是單線程的,一個(gè)代碼塊里面的代碼,只能按順序從上到下執(zhí)行,所以如果中間有一塊代碼,執(zhí)行起來(lái)非常耗時(shí),就會(huì)導(dǎo)致下面的代碼無(wú)法執(zhí)行,出現(xiàn)瀏覽器假死的狀態(tài)。
JS的耗時(shí)操作,常見(jiàn)的有兩種 1.向服務(wù)器發(fā)起請(qǐng)求 2.對(duì)數(shù)組的循環(huán)操作 (當(dāng)然,還有一種,就是把1和2合在一起,叫做 在循環(huán)操作里面向服務(wù)器發(fā)出請(qǐng)求,哈哈哈,實(shí)際項(xiàng)目里面經(jīng)常有人這么干)
解決這兩種耗時(shí)操作的思路都是一樣的——異步編程。JS的異步編程,并不是多線程,因?yàn)檎缟厦嫠f(shuō)的,JS是單線程的。JS的異步,直觀上的理解,就是延時(shí)和回調(diào)。
對(duì)于第一種耗時(shí)情況,我們采用的是ajax異步請(qǐng)求,待耗時(shí)的請(qǐng)求返回結(jié)果時(shí),進(jìn)行回調(diào)操作。
對(duì)于第二種耗時(shí)情況,則可以使用本文即將介紹的方法,setTimeout延時(shí)調(diào)用,進(jìn)行數(shù)組分塊處理。
【這才是高潮】
假設(shè)我們要處理一個(gè)大小為100的數(shù)組,對(duì)于數(shù)組中每個(gè)元素,都需要執(zhí)行大量的處理,每個(gè)元素大約需要1s的處理時(shí)間;
并且我們認(rèn)為,程序后面的代碼,不會(huì)依賴于我們對(duì)這個(gè)數(shù)組的處理結(jié)果。
于是就有了下面這段代碼,以兩種方式來(lái)處理這個(gè)數(shù)組,一種是常規(guī)方式,一種是setTImeout的數(shù)組分塊處理
var processTime = 0; //常規(guī)操作 tcCircle(); //注釋上面的代碼 放開(kāi)下面注釋 以執(zhí)行setTimeout數(shù)組分塊操作 //tcCircleUseSetTimeout(); //time consuming circle function tcCircle(){ var arr = new Array(100); for(var i=0;i0){ setTimeout(arguments.callee,100); } },100); console.log("important process"); console.log("finish!"); } function process(ele){ console.log("process"+(++processTime)); //模擬長(zhǎng)時(shí)間的處理過(guò)程 sleep(1000); } function sleep(sleepTime){ var start=new Date().getTime(); while(true){ if(new Date().getTime()-start>sleepTime){ break; } } }
首先我們執(zhí)行常規(guī)的操作,由于是單線程,可想而知,執(zhí)行完這段程序,至少要 1*100 = 100s,并且瀏覽器會(huì)出現(xiàn)假死
然后我們執(zhí)行setTimeout方式的方法,setTImeout的方式,我們每次只操作數(shù)組里面的一個(gè)對(duì)象,并且在每次操作之間,設(shè)置了100ms的延時(shí),供js引擎執(zhí)行主干的代碼,因此,很明顯,執(zhí)行的效果非常棒!
看完上述內(nèi)容,你們對(duì)JavaScript中怎么利用setTimeout防止循環(huán)超時(shí)有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。