首頁 > web前端 > js教程 > 主體

setTimeout時間設定為0詳細解析

亚连
發布: 2018-05-30 15:56:35
原創
1761 人瀏覽過

setTimeout( ) 是屬於window 的method, 但我們都是略去window 這頂層容器名稱, 這是用來設定一個時間, 時間到了, 就會執行一個指定的method,下面這篇文章主要給大家介紹了關於setTimeout時間設定為0的相關資料,需要的朋友可以參考。

前言

本文主要介紹了關於setTimeout時間設定為0的相關內容,分享出來供大家參考學習,下面話不多說了,來一起看看詳細的介紹吧。

1、開胃菜,為何setTimeout

#首先看一下w3school上面對於setTimeout的解釋

# setTimeout(fn,millisec) 方法用於在指定的毫秒數後呼叫函數或計算表達式。

很簡單,setTimeout() 只執行fn 一次,到底什麼時候執行取決於第二個參數millisec設定的毫秒數,所以很多人習慣上稱之為延遲,無非就是延遲一段時間後再執行裡面的程式碼。

setTimeout(function(){
 console.log('我是setTimeout');
}, 1000);
登入後複製

正常情況下,我是setTimeout 這句話並不會馬上輸出而是等1000毫秒以後會在瀏覽器的控制台輸出。

2、主菜,js是單執行緒的

#OK,看一個例子,這個例子的輸出結果是什麼?

setTimeout(function(){
 console.log(1);
}, 0);
console.log(2);
console.log(3);
登入後複製

出乎某些人的意料,得到的結果竟然是2、3、1。這似乎不按套路出牌啊,明明是等待了0毫秒也就是不等待直接輸出啊,為啥1卻在最後輸出了呢?

這就需要搞清楚一個很重要的概念:js是單執行緒的,單執行緒就意味著,所有任務需要排隊,前一個任務結束,才會執行後一個任務。如果前一個任務耗時很長,後一個任務就得一直等著。

其實很好理解,就像大家去超市買東西一樣,所有買東西的人都需要在收銀台排隊結帳,正常情況下每個收銀台同一時間只能為一位顧客結帳,這位顧客結帳完成才能為下一位顧客服務。

而瀏覽器的核心是多線程的,它們在核心製控下相互配合以保持同步,一個瀏覽器至少實現三個常駐線程:javascript引擎線程,GUI渲染線程,瀏覽器事件觸發線程。

  • javascript引擎是基於事件驅動單執行緒執行的,JS引擎一直等待著任務佇列中任務的到來,然後加以處理,瀏覽器無論何時都只有一個JS執行緒在運行JS程式。

  • GUI渲染執行緒負責渲染瀏覽器介面,當介面需要重繪(Repaint)或由於某種操作引發回流(reflow)時,該執行緒就會執行。但要注意 GUI渲染執行緒與JS引擎是互斥的,當JS引擎執行時GUI執行緒會被掛起,GUI更新會被保存在一個佇列中等到JS引擎空閒時立即執行。

  • 事件觸發線程,當一個事件被觸發時該線程會把事件加到待處理佇列的隊尾,等待JS引擎的處理。這些事件可來自JavaScript引擎目前執行的程式碼區塊如setTimeOut、也可來自瀏覽器核心的其他執行緒如滑鼠點擊、AJAX非同步請求等,但由於JS的單執行緒關係所有這些事件都得排隊等待JS引擎處理。 (當執行緒沒有執行任何同步程式碼的前提下才會執行非同步程式碼)

#其實,當js程式碼執行遇到setTimeout(fn,millisec) 時,會把fn這個函數放在任務佇列中,當js引擎執行緒空閒時並達到millisec指定的時間時,才會把fn放到js引擎執行緒中執行。

setTimeout(fn,0)的意思是,指定某個任務在主執行緒最早可得的空閒時間執行,也就是說,盡可能早得執行。它在"任務佇列"的尾部新增一個事件,因此要等到同步任務和"任務佇列"現有的事件都處理完,才會執行。

HTML5標準規定了setTimeout()的第二個參數的最小值(最短間隔),不得低於4毫秒,如果低於這個值,就會自動增加。在此之前,舊版的瀏覽器都將最短間隔設為10毫秒。另外,對於那些DOM的變動(尤其是涉及頁面重新渲染的部分),通常不會立即執行,而是每16毫秒執行一次。這時使用requestAnimationFrame()的效果比setTimeout() 好。

要注意的是,setTimeout()只是將事件插入了"任務佇列",必須等到目前程式碼(執行堆疊)執行完,主執行緒才會去執行它指定的回調函數。要是目前程式碼耗時很長,有可能要等很久,所以沒有辦法保證,回呼函數一定會在setTimeout()指定的時間執行。

3、甜點,setTimeout的妙用

其实setTimeout是有一些妙用的,这里简单列举几个。

函数去抖

让一个函数在一定间隔内没有被调用时,才开始执行被调用方法。比如当你在使用 google 搜索内容的时候,有些关键词输入到一半,谷歌会展示一个可选列表,根据你当前输入的内容作出的一个猜测联想。需要监听文字改变,每一次改变都会调用一次回调函数,现在需要的一种实现是在用户停止键盘事件一段时间后,去发送一个请求。

var debounce = function(method, context) {
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
  method.call(context);
 },100);
}
登入後複製

轮训任务

js中可以使用setInterval开启轮询,但是这种存在一个问题就是执行间隔往往就不是你希望的间隔时间。

比如有个轮询任务间隔是100ms,但是执行方法的时间需要450ms,那么在200ms、300ms、400ms本来是计划中执行任务的时间,浏览器发现第一个还未执行完,那么就会放弃2、3、4次的任务执行,并且在500ms之后再次执行任务,这样的话,其实再次执行的间隔就只有50ms。使用setTimeout构造轮询能保证每次轮询的间隔。

setTimeout(function () {
 console.log('我被调用了');
 setTimeout(arguments.callee, 100);
}, 100);
登入後複製

延迟js引擎的调用

var p = document.createElement('p');
p.innerHTML = '我是一个p';
p.setAttribute('style', 'width:200px; height:200px;background-color:#f00; ');
document.body.appendChild(p);
setTimeout(function() {
 console.log('我被调用了');
}, 1000);
登入後複製

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

jQuery替换节点元素的操作方法

Vue中computed与methods的区别详解

javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

以上是setTimeout時間設定為0詳細解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板