setTimeout()設定延遲時間為0毫秒的作用

admin發表於2017-03-29

關於setTimeout()函式的基本用法這裡就不多介紹了。

具體可以參閱setTimeout()函式用法詳解一章節。

也就是說此函式可以設定指定函式的執行的延遲時間，但是在實際應用中，setTimeout()函式的延遲時間設定0，感覺這毫無道理。

看下面的程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
obt.onmousedown=function(){
  setTimeout(function(){
    document.getElementById('txt').focus();
  },0);
};

是不是感覺上面的程式碼毫無道理，為何不直接呼叫函式，而非要將其放入setTimeout()函式中，並且將其設定為0秒以後執行。下面來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" >
function get(id){
  return document.getElementById(id);
} 
window.onload=function(){
  get('bt').onmousedown=function(){
    var input = document.createElement('input');
    input.setAttribute('type','text');
    input.setAttribute('value','softwhy.com');
    get('box').appendChild(input);
    input.focus();
    input.select();
  }
}
</script>
</head>
<body>
<button id="bt">建立文字框</button>
<p id="box"></p>
</body>
</html>

在上面的程式碼中，滑鼠按下按鈕可以建立一個文字框，但是文字框中的內容不會被選中。

說明:這裡之所以使用onmousedown事件，是因為此事件內部處理可能會導致文字框無法被選中，如果使用其他時間就會被選中。

程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" >
function get(id){
  return document.getElementById(id);
} 
window.onload=function(){
  get('bt').onmousedown=function(){
    var input = document.createElement('input');
    input.setAttribute('type','text');
    input.setAttribute('value','softwhy.com');
    get('box').appendChild(input);
    setTimeout(function(){
      input.focus();
      input.select();
    },0);
  }
}
</script>
</head>
<body>
<button id="bt">建立文字框</button>
<p id="box"></p>
</body>
</html>

在上面的程式碼中，點選建立文字框之後，文字框中的內容可以被選中。

這是因為使用setTimeout()函式中，就形成了非同步操作，將選中等操作單獨形成一個任務，這樣的話，onmousedown事件不會對其產生相關選中方面的影響，於是就可以實現文字的選中效果，更多內容可以參閱下面的相關閱讀。

相關閱讀:

1.setTimeout()函式和ajax所謂的非同步操作一章節。

2.javascript非同步操作和定時器原理詳解一章節。

相關文章