關于setTimeout 第一個參數的問題解析

ghnor 發布于2019-08-21 11:35 / 2315人閱讀

摘要：總之，在的時候盡量不要用字符串的參數，因為具有許多不可預見的危險性，比如說可能有意外的運行結果可能隱式創建全局變量，閉包作用域解析過多消耗，，運行慢啊巴拉巴拉之類的。但是我們也需要了解下的一些黑魔法，以防到時候懵逼。

題目為什么叫setTimeout的第一個參數而不是回調函數？如果你心中有稍有疑惑，或許應該看看下面的文章

我們日常使用setTimeout()，一般是將函數作為第一個參數，但是也有例外情況，先看以下代碼：

function test() {

? var cl = function() {

? ? console.log(666)

? }

? setTimeout("cl()", 1500)

}

test()

將以上代碼CV到chrome中的console，運行發現：

Uncaught ReferenceError: cl is not defined

沒有定義cl函數，奇怪是并沒有報Uncaught SyntaxError: Unexpected identifier這樣的語法錯誤，查javascript MDN我們就會發現：

setTimeout允許講一個字符串作為第一個參數，而且js內部將會調用eval()函數用來動態執行一段字符串腳本，至于為什么找不到cl函數，我們猜想是作用域問題，既然是eval動態執行，我們在字符串參數中輸出當前this綁定的對象：

function test() {

? var cl = function() {

? ? console.log(666)

? }

? setTimeout("console.log(this);cl()", 1500)

}

test()

執行后發現：

原來this綁定window全局對象，這下明白了，eval()執行動態腳本的時候，在全局作用域并沒有找到我們定義在函數test內部的cl，所以會報錯。

我們將cl定義移到外部：

ok了

————分割線————

var cl = function() {console.log(666)}

setTimeout(cl(), 1500)

經?？吹接行氯嗽谏鐓^上問這段代碼為什么沒有延遲執行，只需注意這邊的cl()是一個函數執行而不是函數定義，如果想延遲執行，我們需要傳遞一個函數地址，比如：

var cl = function() {console.log(666)}

setTimeout(cl, 1500)

或者直接return一個函數：

var cl = function() {

    return function() {

        console.log(666)

    }

}

setTimeout(cl(), 1500)

又或者參數處直接定義：

setTimeout(function() {console.log(666)}, 1500)

歸根結底還是搞清引用函數地址和執行函數的區別

————分割線————

以上規則也同樣適用于字符串參數，只是字符串參數中要加上()保證eval的時候執行，不要到時候只是eval了一個地址 =。=，比如這樣：

var cl = function() {

? ? console.log(666)

? }

function test() {

? setTimeout("cl", 1500)

}

test()

執行一下，啥屁也沒看到 = 。=

總之，在setTimeout的時候盡量不要用字符串的參數，因為eval()具有許多不可預見的危險性，比如說可能有意外的運行結果,可能隱式創建全局變量，閉包作用域解析過多消耗，xss，運行慢啊巴拉巴拉之類的。但是我們也需要了解下js的一些黑魔法，以防到時候懵逼。

GPU云服務器云服務器關于javascript的問題關于php的問題關于系統錯誤的問題有關于回調的問題

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

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

關于javascript 中的高級定時器的若干問題

摘要：閉包閉包是指有權訪問另一個函數作用域中的變量的函數當某個函數被調用時，會創建一個執行環境及相應的作用域鏈。要注意通過第句聲明的這個方法屬于構造函數生成的對象，而不屬于構造函數的變量對象，也就是說，并不存在于作用域鏈中。看到評論里有仁兄建議我試試箭頭函數，真是受寵若驚，本來寫這篇文章也只是想記錄寫要點給自己日后看的。今天早上看到一篇總結javascript中this的文章JavaScr...

zr_hebo 2019-08-21 11:22 評論0 收藏0
前端校招準備系列--js中的setTimeout到底是什么？

摘要：瀏覽器是多進程的，而瀏覽器的內核渲染進程是多線程的。如果已經將回調函數放進任務隊列，但是主線程正在執行一個非常耗時的任務，當這個任務執行完畢后，主線程去任務隊列中取任務，這個時候，就會出現連續執行的情況，也就是說相當于失效了。前言 ??在刷筆試題的時候，經常會碰到setTimeout的問題，只知道這個是設置定時器；但是考察的重點一般是在一個方法中包含了定時器，定時器中的打印和方法中打...

Godtoy 2019-08-23 13:41 評論0 收藏0
在編寫javascript時要注意的一些細節

摘要：不單單是因為引起的。用與要注意的地方這里要注意的是這二個函數的第一個參數都會把指向還有第一個參數可以為但不要這樣用因為這樣等于自己隱式使用了。自動分號插入 Js不像其他語言強制要求;號結尾不然編譯不過，原因是JS有自動；號的插入。 var text=function(){} text() 這樣你不加;號也能運行其實在內部js是需要;號去幫助解析的 var text=function(...

Eric 2019-08-21 11:20 評論0 收藏0
關于 ES6 中 Promise 的面試題

摘要：執行，輸出，宏任務執行結束。到此為止，第一輪事件循環結束。參考入門阮一峰系列之我們來聊聊一道關于應用的面試題阿里前端測試題關于中函數的理解與應用這一次，徹底弄懂執行機制一個面試題原生的所有方法介紹附一道應用場景題目異步流程控制說明最近在復習 Promise 的知識，所以就做了一些題，這里挑出幾道題，大家一起看看吧。題目一 const promise = new Promise((...

dreambei 2019-08-23 12:36 評論0 收藏0
關于Promise

摘要：是一種異步編程的解決方案相比傳統回調函數更合理立即執行性立即執行返回成功后執行控制臺輸出立即執行后執行返回成功對象表示未來發生的事件在創建時作為參數傳入的函數是會被立即執行的只是其中執行的代碼可以是異步代碼有些人會認為當對象調用方法時接受的 Promise是一種異步編程的解決方案,相比傳統回調函數更合理. 1.Promise立即執行性 let p = new Promise((reso...

stdying 2019-08-20 18:22 評論0 收藏0