好事成双的寓意

setTimeout的第三個參數你可能不知道的作用

2019-08-16        106

說起來你可能不相信,setTimeout居然有第三個參數,我以前也沒用過這個,但最近看到一個代碼解決了for循環里面加入了setTimeout的例子,下面一起看看這個setTimeout第三個參數。

for(var i = 0; i<6; i++){    setTimeout(function(){        console.log(i);    },1000);}

看到上面的這個for例子,相信很多人都能脫口而出,它會連續輸出6次6,因為setTimeout是一個異步操作,而等到執行setTimeout時,for循環已經執行完畢,這時的i已經等于6,所以輸出6次的6。

閉包

那么怎么改呢?說說最常見的改法就是使用閉包。

for(var i=0; i<6; i++){    (function(j){        setTimeout(function(){            console.log(j);        },j*1000);    })(i);}

通過閉包,將i的變量駐留在內存中,當輸出j時,引用的是外部函數A的變量值i,i的值是根據循環來的,執行setTimeout時已經確定了里面的的輸出了。

函數傳參

還有一種就是給setTimeout添加第三個參數。

for(var i=0;i<6;i++){    setTimeout(function(j){        console.log(j);    },i*1000,i);}

由于每次傳入的參數是從for循環里面取到的值,所以會依次輸出0~5。

看了上面的代碼,相信你對這個setTimeout的第三個參數作用大概了解了,是的,它就是給setTimeout個函數的參數。

翻一下MSDN文檔,里面確實有記錄setTimeout第三個及后面的參數的。下面我們來看看這個代碼

function sum(x,y,z){    console.log(x+y+z);}setTimeout(sum,1000,1,2,3);

上面第二行打印出了6,1+2+3=6(11是setTimeout timeId)。

可以看出,第三個及以后的參數都可以作為sum函數的參數。

第三個參數作為函數
var i=0;setTimeout(function(){    console.log('第二次'+i)},3000,setTimeout(function(){    console.log('次'+i);    i++;},1000));

最后依次輸出為 次0 第二次1

可以看到第三個參數還可以是先執行,然后再執行函數。

今天就到這里了,有沒有get到這個點,我翻了之前自己寫過的關于setTimeout和setInterval的相關文章,都沒有談到第三個參數的,中文的w3c教程也沒看到。

利用好setTimeout的第三個參數,有時候會有意向不到的收獲。希望這篇文章對你有所幫助。


AM 09:00 ~ 12:00

PM 14:00 ~ 18:00

Tel 010-50933590

Hp 18910140161

設計優勢

獨立的設計團隊 帶給您全新的視覺體驗

功能開發

強大的技術實力,完成您想要的任何功能

售后服務

完善的售后服務,解決您在使用過程中遇到的問題

好事成双的寓意 44230735473539376872941463938895429811684521243446117909332711815159616386243801732288771252387713 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();