js闭包结合定时器的题目详解(面试题之一)

chaos_G 发布于2019-08-23 14:12 / 2378人阅读

摘要：学习过程中遇到这样一个题目，第一眼看很懵逼，第二眼也懵逼，第三眼更懵逼，大家可以发动你的想象力猜一猜正确答案是多少，反正我是没猜对。

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原型面试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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