国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

菜鳥理解setTimeout和setInterval

sixleaves / 3094人閱讀

摘要：也就是說，這僅僅是計劃在未來某一個時間執(zhí)行某個任務(wù)，并不能保證精確的時間。重復(fù)執(zhí)行問題這個方法執(zhí)行時僅當(dāng)沒有該計時器的其他代碼示例時才進行下一輪的執(zhí)行。這樣的規(guī)則就會導(dǎo)致某些間隔會被跳過，同時多個間隔可能比預(yù)期時間要短。

寫在前面，最近在準(zhǔn)備校招，陸陸續(xù)續(xù)做一些之前的總結(jié)，寫了一個小系列的文章，想借此機會記錄下來，也能以后有個地方能進行查閱，上一篇文章在css基礎(chǔ)總結(jié)希望能幫助一下和我一樣的菜鳥們好了，正文開始。

這是一個老生常談，新手掉坑的問題，算是一個比較經(jīng)典的對于javascript運行機制的理解問題，我在這里粗淺的談一下自己的理解，話不多說，進入正題：

兩者表面上的區(qū)別

setTimeout() 方法用于在指定毫秒數(shù)之后調(diào)用其中的函數(shù)

setInterval() 方法則是在間隔一定毫秒后重復(fù)調(diào)用其中的函數(shù)

透過現(xiàn)象看本質(zhì) 時間精確問題

由于js是運行在單線程的環(huán)境當(dāng)中的，單線程就意味著任務(wù)的執(zhí)行需要依賴任務(wù)隊列。實際運行時是將兩個方法的代碼塊移出當(dāng)前運行環(huán)境（從任務(wù)隊列移出到回調(diào)隊列中），當(dāng)執(zhí)行完當(dāng)前任務(wù)后，檢查回調(diào)隊列中有無需要執(zhí)行的任務(wù)（對應(yīng)這兩個方法為是否已經(jīng)到執(zhí)行時間），可是如果時間到時恰好有別的任務(wù)在進行的話，由于其單線程的機制，該方法就只能等到當(dāng)前任務(wù)結(jié)束之后才能運行。

回到方法本身，這就相當(dāng)于其他的正常任務(wù)在一個隊列中，當(dāng)遇到這兩個方法時，就將他們移出隊列，并開始計時，當(dāng)時間到時，直接“插隊”到隊首，如果隊首有正在執(zhí)行的任務(wù)，則排在次隊首，等待執(zhí)行。也就是說，這僅僅是“計劃”在未來某一個時間執(zhí)行某個任務(wù)，并不能保證精確的時間。

setInterval重復(fù)執(zhí)行問題

這個方法執(zhí)行時僅當(dāng)沒有該計時器的其他代碼示例時才進行下一輪的執(zhí)行。這樣的規(guī)則就會導(dǎo)致某些間隔會被跳過，同時多個間隔可能比預(yù)期時間要短。所以為了避免setInterval所造成的問題，可以用setTimeout來通過循環(huán)代替setInterval方法，從而實現(xiàn)一個重復(fù)的定時器(除非必要，盡量避免代碼中出現(xiàn)setInterval)

方法中使用this的問題

在兩個方法中傳入函數(shù)時(即第一個函數(shù)參數(shù)中含有另外一個函數(shù))，此函數(shù)中的this會只想window對象。這是由于兩個方法調(diào)用的代碼在與所在函數(shù)完全分離的執(zhí)行環(huán)境上(第一條中有講到的兩個方法的運行機制)，這就會導(dǎo)致這些代碼中包含的this關(guān)鍵字會指向window(或全局)對象。

但是要注意，如果this只是在兩個方法中而不是在方法中的函數(shù)中時，this的指向符合我們的預(yù)期為當(dāng)前對象。

解決方法：

1.將當(dāng)前對象的this存為一個變量，定時器內(nèi)的函數(shù)利用閉包來訪問這個變量，如下：

var num = 0;
function Obj (){
    var that = this;    //將this存為一個變量，此時的this指向obj
    this.num = 1,
    this.getNum = function(){
        console.log(this.num);
    },
    this.getNumLater = function(){
        setTimeout(function(){
            console.log(that.num);    //利用閉包訪問that，that是一個指向obj的指針
        }, 1000)
    }
}
var obj = new Obj;
obj.getNum();          //1　　打印的為obj.num，值為1
obj.getNumLater()      //1　　打印的為obj.num，值為1

2.利用bind()方法：

var num = 0;
function Obj (){
    this.num = 1,
    this.getNum = function(){
        console.log(this.num);
    },
    this.getNumLater = function(){
        setTimeout(function(){
            console.log(this.num);
        }.bind(this), 1000)    //利用bind()將this綁定到這個函數(shù)上
    }
}
var obj = new Obj;
obj.getNum();                 //1　　打印的為obj.num，值為1
obj.getNumLater()             //1　　打印的為obj.num，值為1

bind()方法是在Function.prototype上的一個方法，當(dāng)被綁定函數(shù)執(zhí)行時，bind方法會創(chuàng)建一個新函數(shù)，并將第一個參數(shù)作為新函數(shù)運行時的this。在這個例子中，在調(diào)用setTimeout中的函數(shù)時，bind方法創(chuàng)建了一個新的函數(shù)，并將this傳進新的函數(shù)，執(zhí)行的結(jié)果也就是正確的了。關(guān)于bind方法可參考 MDN bind

清除計時器 clearTimeout()

在在使用setTimeout時，該方法會返回一個唯一的關(guān)于當(dāng)前計時器的計時ID，在clearTimeout()方法中傳入這個ID值即可取消對應(yīng)的Timeout

clearInterval()

同上

參考

上面是我在使用過程中遇到問題后在網(wǎng)上查閱后自己的一些總結(jié)，希望對和我一樣的新手有所幫助，想要更深入了解他們的區(qū)別和js的一些運行機制，請入傳送門：

傳送門1---阮大的剖析

傳送門2---this指向

傳送門3---調(diào)用執(zhí)行


文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84222.html

相關(guān)文章

  • 前端校招準(zhǔn)備系列--js中的setTimeout到底是什么？

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

    Godtoy 評論0 收藏0

  • Javascript學(xué)習(xí)總結(jié) - JS基礎(chǔ)系列三

    摘要：案例每隔毫秒調(diào)用函數(shù)并顯示時間。當(dāng)點擊按鈕時，停止時間代碼如下計時器每隔毫秒調(diào)用函數(shù)，并將返回值賦值給計時器計時器，在載入后延遲指定時間后去執(zhí)行一次表達式僅執(zhí)行一次。該值標(biāo)識要取消的延遲執(zhí)行代碼塊。 簡述 本系列將持續(xù)更新Javascript基礎(chǔ)部分的知識，誰都想掌握高端大氣的技術(shù)，但是我覺得沒有一個扎實的基礎(chǔ)，我認(rèn)為一切高階技術(shù)對我來講都是過眼云煙，要成為一名及格的前端工程師，必須把...

    zlyBear 評論0 收藏0

  • JS事件循環(huán)，了解一下

    摘要：任務(wù)隊列中的代碼被加載到函數(shù)調(diào)用棧中去執(zhí)行。說到這里，你基本上對事件循環(huán)有個大致的了解了。 在理解事件循環(huán)之前，我總會遇到一些奇奇怪怪的問題：比如明明已經(jīng)調(diào)接口拿到了數(shù)據(jù)，可是跟在調(diào)數(shù)據(jù)之后的操作卻沒有正常執(zhí)行；又或者不知道為啥，代碼里非得加個setTimeout才能正常跑通；特別是在運用Promise的時候，更是有各種問題百思不得解。遇上問題要解決，更要知道問題產(chǎn)生的原因，這樣才能h...

    xbynet 評論0 收藏0

  • setTimeout和setInterval

    摘要：一個頁面在瀏覽器顯示出來至少需要個線程，分別是引擎，渲染，事件觸發(fā)。其中事件觸發(fā)是獨立于其他個執(zhí)行的，而和是相互排斥的，也就是說同一個時間二者只有一個在工作。 作為DOM本身十分重要的2個異步執(zhí)行函數(shù)，初學(xué)者感覺這個很不好理解，我簡單寫一寫我的理解 setTimeout (func, millisec); setInterval(func, millisec); 這兩個方法在形式看起來...

    SnaiLiu 評論0 收藏0

  • 理解javascript中的事件循環(huán)(Event Loop)

    摘要：主線程會暫時存儲等異步操作，直接向下執(zhí)行，當(dāng)某個異步事件觸發(fā)時，再通知主線程執(zhí)行相應(yīng)的回調(diào)函數(shù)，通過這種機制，避免了單線程中異步操作耗時對后續(xù)任務(wù)的影響。 背景 在研究js的異步的實現(xiàn)方式的時候，發(fā)現(xiàn)了JavaScript 中的 macrotask 和 microtask 的概念。在查閱了一番資料之后，對其中的執(zhí)行機制有所了解，下面整理出來，希望可以幫助更多人。 先了解一下js的任務(wù)執(zhí)...

    mykurisu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<