當SetTimeout遇到了字符串

waruqi 發布于2019-08-21 14:41 / 849人閱讀

摘要：也自己試了一下，發現確實不能運行字符串里面的代碼。那么現在答案很明顯了，既是不支持第一個參數為字符串的調用。在原先的問題中，如果是的話，由于的第一個參數支持的是函數或者是表達式，所以字符串會被自動執行，將這個字符串強制轉換成一個函數。

今天閑來沒事的時候，去逛逛segementFault，看了看別人提的問題。說到setTimeout和window.onload沖突。一開始我是挺疑惑他表他什么意思的，因為setTimeout和window.onload應該不會有明顯的沖突吧。帶著疑惑去追問。后來貼出代碼的時候我就明白了,來看看他的代碼中的疑惑吧。

window.onload=function(){
setTimeout("D.style.background="#990033"",2000);
}

他覺得這個代碼運行的時候，setTimeout會報錯，不能正確的運行指定的代碼，就覺得在window.onload和setTimeout有沖突。

我對這個問題非常感興趣。也自己試了一下，發現確實不能運行字符串里面的代碼。但是還是很懷疑window.onload和setTimeout怎么可能會有沖突呢？

解決問題

為了測試方便，我就稍微改動了一下代碼。將setTimeout的調用改成調用函數。

window.onload = function() {
    function myFun(i) {
        alert(1);
    }
    setTimeout("myFun(1)", 2000);
}

在這里發現的確不能運行，但是這里的問題就很明顯了，我將函數的調用變成了 "myFun(1)" 的字符串調用，所以會出現不能調用 myFun() 的問題。

為了深入理解我們在W3school查詢一下setTimeout的用法。

那么就是setTimeout只能接受函數或者是表達式的計算。那么現在答案很明顯了，既是setTimeout不支持第一個參數為字符串的調用。

但是按照提問者的用法，這種 "D.style.background="#990033"" CSS的調用也必須準守這種形式那么怎么辦？

那么就服從setTimeout的規則，說干就干，將他裝換成函數就好了。見以下代碼。

window.onload=function(){
setTimeout(function(){
    D.style.background="#990033"
},2000);
}

這里的2秒鐘之后就會執行setTimeout里面的匿名函數，即準守了setTimeout的原則，也可以利用setTimeout來調用類似字符串的形式的功能代碼。

回到提問并且深入挖掘

回到提出的問題上來，深入的挖掘，其實并不是setTimeout和window.onload有沖突，在原來的問題中，其實是Javascript作用域在作怪。

在原先的問題中，如果是 setTimeout("D.style.background="#990033"",2000); 的話，由于setTimeout的第一個參數支持的是函數或者是表達式，所以字符串會被自動執行 new Function ，將這個字符串強制轉換成一個函數。

我們知道在Javascript中，函數里面有自己的作用域，和外界的作用域不同，而在函數內部并沒有D.style.background這個對象，所以會有報錯。在我變化的例子中，也是如此，如果使用了 setTimeout("myFun(1)", 2000)，那么這里面的字符串就會被自動執行 new Function ，所以創建出來的函數不在這個作用域內，當然也就不能調用，會出現無法找到的問題了。

GPU云服務器云服務器 setTimeout javascript settimeout js定時器setTimeout 遇到過

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87993.html

前端基礎進階（十二）：深入核心，詳解事件循環機制

摘要：前端基礎進階正是圍繞這條線索慢慢展開，而事件循環機制，則是這條線索的最關鍵的知識點。特別是中正式加入了對象之后，對于新標準中事件循環機制的理解就變得更加重要。之后全局上下文進入函數調用棧。 showImg(https://segmentfault.com/img/remote/1460000008811705); JavaScript的學習零散而龐雜，因此很多時候我們學到了一些東西，但...

whjin 2019-08-21 18:31 評論0 收藏0
事件循環機制

摘要：事件觸發線程主要負責將準備好的事件交給引擎線程執行。進程瀏覽器渲染進程瀏覽器內核，主要負責頁面的渲染執行以及事件的循環。第二輪循環結束。將自己讀到的比較好的文章分享出來，大家互相學習，各位大佬有好的文章也可以留個鏈接互相學習，萬分感謝！線程與進程關于線程與進程的關系可以用下面的圖進行說明： showImg(https://segmentfault.com/img/bVbjSZt?...

Blackjun 2019-08-29 17:21 評論0 收藏0
事件循環機制

摘要：事件觸發線程主要負責將準備好的事件交給引擎線程執行。進程瀏覽器渲染進程瀏覽器內核，主要負責頁面的渲染執行以及事件的循環。第二輪循環結束。將自己讀到的比較好的文章分享出來，大家互相學習，各位大佬有好的文章也可以留個鏈接互相學習，萬分感謝！線程與進程關于線程與進程的關系可以用下面的圖進行說明： showImg(https://segmentfault.com/img/bVbjSZt?...

CloudwiseAPM 2019-08-26 13:25 評論0 收藏0
徹底搞懂JavaScript執行機制

摘要：徹底搞懂執行機制首先我們大家都了解的是，是一門單線程語言，所以我們就可以得出是按照語句順序執行的首先看這個顯然大家都知道結果，依次輸出，然而換一種這個時候再看代碼的順序執行，輸出，，，。不過即使主線程為空，也是達不到的，根據標準，最低是。徹底搞懂JavaScript執行機制首先我們大家都了解的是，JavaScript 是一門單線程語言，所以我們就可以得出： JavaScript 是...

hizengzeng 2019-08-23 11:34 評論0 收藏0