js閉包結合定時器的題目詳解(面試題之一)

chaos_G 發布于2019-08-23 14:12 / 2379人閱讀

摘要：學習過程中遇到這樣一個題目，第一眼看很懵逼，第二眼也懵逼，第三眼更懵逼，大家可以發動你的想象力猜一猜正確答案是多少，反正我是沒猜對。

function fn1(){
    for(var i=0;i<4;i++){
        var tc = setTimeout(function(i){
            console.log(i);
            clearTimeout(tc)
        },10,i)
    }
    
}    
function fn2(){
        for(var i=0;i<4;i++){
            var tc = setInterval(function(i,tc){
                console.log(i);
                clearInterval(tc)
            },10,i,tc) 
        }
    }
fn1();
fn2();

學習過程中遇到這樣一個題目，第一眼看很懵逼，第二眼也懵逼，第三眼更懵逼，大家可以發動你的想象力猜一猜正確答案是多少，反正我是沒猜對。

接下來，我分享一下我順著答案，猜過程的調試過程吧，順便揭曉一下答案

fn1()//0,1,2
fn2()//0,1,2,3,3,3,3,3,...全是3

為毛是這樣的結果呢，大家對比一下兩個函數有什么不同，仔細看發現兩點

一個是setTimeout,一個是setInterval,這個區別導致后面結果中，最后一輸出3

定時器后面的參數不一樣，setInterval多一個tc參數，并且匿名函數中接受了這個tc參數（敲黑板，劃重點！！！）,對定時器傳參不明白的點擊進去看https://developer.mozilla.org...

對fn1函數稍稍改變一下呢

在定時函數外面tc能正常打印，但是定時器里面tc一直是最后一個值,這是為什么呢？

如上圖，可以看出函數執行順序，在第一個定時器里的函數執行時，tc變量保存在內存中的值是6449，也就是最后一個定時器的id,setTimeout中的函數每次訪問的便是tc變量內存中的6449，所以每次都是清除的最后一個定時器，最后一個定時器還沒執行就已經被清除了，所以最后打印出0，1，2

希望能輸出0,1,2,3咋辦呢

將tc作為變量傳入，函數內部是允許訪問函數外部的值的，每一次清除的定時器都是上一次執行后的定時器，fn2()也可以同理分析

GPU云服務器云服務器 js的基礎面試題 js面試閉包如何回答手寫js面試題 js原型面試題

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

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

JavaScript系列（四） - 收藏集 - 掘金

摘要：函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此，...

cfanr 2019-08-20 16:33 評論0 收藏0
一道js閉包面試題的學習

摘要：然后最外層這個函數會返回一個新對象，對象里面有一個屬性，名為，而這個屬性的值是一個匿名函數，它會返回。最近看到一條有意思的閉包面試題，但是看到原文的解析，我自己覺得有點迷糊，所以自己重新做一下這條題目。閉包面試題原題 function fun(n, o) { // ① console.log(o); return { // ② fun: function(m) ...

plus2047 2019-08-26 12:15 評論0 收藏0
javasscript - 收藏集 - 掘金

摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題...

Rango 2019-08-20 17:15 評論0 收藏0
前端20個真正靈魂拷問，吃透這些你就是中級前端工程師【上篇】

摘要：還是老規矩，從易到難吧傳統的定時器，異步編程等。分配對象時，先是在空間中進行分配。內存泄漏內存泄漏是指程序中己動態分配的堆內存由于某種原因程序未釋放或無法釋放，造成系統內存的浪費，導致程序運行速度減慢甚至系統崩潰等嚴重后果。 showImg(https://segmentfault.com/img/bVbwkad?w=1286&h=876); 網上參差不棄的面試題，本文由淺入深，讓你在...

mdluo 2019-08-30 15:44 評論0 收藏0
前端20個真正靈魂拷問，吃透這些你就是中級前端工程師【上篇】

摘要：還是老規矩，從易到難吧傳統的定時器，異步編程等。分配對象時，先是在空間中進行分配。內存泄漏內存泄漏是指程序中己動態分配的堆內存由于某種原因程序未釋放或無法釋放，造成系統內存的浪費，導致程序運行速度減慢甚至系統崩潰等嚴重后果。 showImg(https://segmentfault.com/img/bVbwkad?w=1286&h=876); 網上參差不棄的面試題，本文由淺入深，讓你在...

leap_frog 2019-08-26 10:46 評論0 收藏0