Window setInterval() 方法詳解,其中有的兩個大坑:①當參數爲code時,記得要用單引號括起來,否則代碼只會執行一次。②單雙引號歧義問題

目錄

1_語法:

2_當參數爲code時,兩個易踩得坑:

3_四種正確的常見寫法

4_總結


1_語法:

setInterval(code, milliseconds); setInterval(function, milliseconds, param1, param2, ...)

參數 描述
code/function 必需。要調用一個代碼串,也可以是一個函數。
milliseconds 必須。週期性執行或調用 code/function 之間的時間間隔,以毫秒計。
param1, param2, ... 可選。 傳給執行函數的其他參數(IE9 及其更早版本不支持該參數)。

 

 

 

 

 


2_當參數爲code時,兩個易踩得坑:

1.當參數爲code時,必須要單引號''把code擴起來否則代碼只會執行一次。

正確寫法(當參數爲code時,code必須用單引號擴起來):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>setIntervalDemo</title>
</head>
<body>
<p>點擊按鈕,等待1秒,後臺輸出hello。1秒後會繼續輸出,如此循環下去...</p>
<button οnclick="myFunction()">點我</button>

<script>
//正確寫法
function myFunction() {
    setInterval('console.log("hello");', 1000);
}
</script>

</body>
</html>

錯誤寫法(此時參數是code,但是code沒有用單引號擴起來,所以代碼只會執行一次):

//參數爲code時,不加單引號,code只會執行一次
function myFunction() {
    setInterval(console.log("hello"), 1000);
}

hello只輸出了一次

2.防止單引號或雙引號在一句語句中同時出現兩對而產生歧義,所以在console.log時,如果要輸出字符串要單雙引號混用。

錯誤寫法:

//參數爲code時,單引號或者雙引號同時用會造成歧義報錯,應該單雙引號混用避免歧義
function myFunction() {
    setInterval('console.log('hello');', 1000);
}

點擊按鈕後板報錯: 


3_四種正確的常見寫法

共同的代碼在(可<script>標籤內加入代碼):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>setIntervalDemo</title>
</head>
<body>
<p>點擊按鈕,等待1秒,後臺輸出hello。1秒後會繼續輸出,如此循環下去...</p>
<button οnclick="myFunction()">點我</button>
<script>
//在此處加入代碼
</script>
</body>
</html>

 1.參數爲code時,寫法1:參數是code,要給code加單引號,直接循環code內容,正確寫法

// 參數爲code時,寫法1:參數是code,要給code加單引號,直接循環code內容,正確寫法
function myFunction() {
    setInterval('console.log("hello");', 1000);
}

2.參數爲code時,寫法2:調用函數寫法,注意此時是實際上參數是code而不是function,所以要給調用的function加單引號

//參數爲code時,寫法2:調用函數寫法,注意此時是實際上參數是code而不是function,所以要給調用的function加單引號
function myFunction() {
    setInterval('myConsole()',1000);
} 
function myConsole() {
    console.log("hello")
}

3.參數爲function時,寫法1:調用函數寫法,參數是匿名函數,不用加單引號

//參數爲function時,寫法1:調用函數寫法,參數是匿名函數,不用加單引號
function myFunction() {
    setInterval(function(){ myConsole() },1000);
} 
function myConsole() {
    console.log("hello")
}

4.參數爲function時,寫法2:參數是箭頭函數,不用加單引號

//參數爲function時,寫法2:參數是箭頭函數,不用加單引號
function myFunction() {
    setInterval(()=>console.log("hello"), 1000);
}

以上四種寫法都能實現每秒輸出一次hello:


4_總結

1.setInterval()當參數爲code時記得加單引號,否則代碼只會執行一次,瓷碗還要注意單雙引號歧義的問題。

2.setInterval()調用函數的其中一種寫法, setInterval('myConsole()',1000)  實際上此時參數是code而不是function,也要加單引號,否則代碼只會執行一次。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章