【js】利用闭包消除回调函数启动时值已经发生变化的影响

时间:2022-09-07 08:55:46

在以下代码中,timeFun异步执行了一个匿名函数,当输出color的值时已经由green变成red,因此输出为red。

function timedFun(callback){
    setTimeout(callback,200);// 两百毫秒后调用callback函数
}

var color='green';

timedFun(function(){ // 执行timedFun函数,因为在两百毫秒后才启动匿名函数,导致输出时后面的color='red';已经先执行,所以输出时color=red.在异步执行时是值得注意的情况
    console.log("color="+color);
});

color='red';

下面代码是利用闭包将当时的color固化成匿名函数本地变量,这样再不受全局变量color值变化的影响。

function timedFun(callback){
    setTimeout(callback,200);// 两百毫秒后调用callback函数
}

var color='green';

(function(color){// 利用闭包,将此时的color(值为'green')封装到一个匿名函数中,color就成了这个匿名函数的本地变量,因此外界全局变量color发生变化时,本地变量color不受影响还是保持原值green
    timedFun(function(){
        console.log("color="+color);
    })
})(color);

color='red';

【js】利用闭包消除回调函数启动时值已经发生变化的影响的更多相关文章

  1. [js]利用闭包向post回调函数传参数

    最近在闲逛校园XX站的时候,打算搞个破坏,试试有多少人还是用初始密码登陆.比较懒,所以直接打开控制台来写. 所以问题可以描述为: 向后端不断的post数据,id从1~5000自增,后端会根据情况来返回 ...

  2. Node.js自学笔记之回调函数

    写在前面:如果你是一个前端程序员,你不懂得像PHP.Python或Ruby等动态编程语言,然后你想创建自己的服务,那么Node.js是一个非常好的选择.这段时间对node.js进行了简单的学习,在这里 ...

  3. Objective-C学习笔记 利用协议实现回调函数

    来源:http://mobile.51cto.com/iphone-278354.htm Objective-C学习笔记 利用协议实现回调函数是本文要介绍的内容,主要是实现一个显示文字为测试的视图,然 ...

  4. 【授课录屏】JavaScript高级(IIFE、js中的作用域、闭包、回调函数和递归等)、MySQL入门(单表查询和多表联查)、React(hooks、json-server等) 【可以收藏】

    一.JavaScript授课视频(适合有JS基础的) 1.IIFE 2.js中的作用域 3.闭包 4.表达式形式函数 5.回调函数和递归 资源地址:链接:https://pan.baidu.com/s ...

  5. js、匿名函数、闭包、回调函数

    234567891011121314151617181920212223242526272829303132333435 闭包 闭包:闭包是指有权访问另一个函数作用域中的变量的函数 函数嵌套一个函数, ...

  6. js利用闭包封装自定义模块的几种方法

    1.自定义模块: 具有特定功能的js文件 将所有的数据和功能都封装在一个函数的内部 只向外暴露一个包含有n个方法的对象或者函数 模块使用者只需要通过模块暴露的对象调用方法来实现相对应的功能 1.利用函 ...

  7. Node.js系列基础学习-----回调函数,异步

    Node.js基础学习 Node.js回调函数 Node.js异步编程的直接体现就是回调,异步编程依托回调来实现,但不是异步.回调函数在完成任务后就会被调用,Node有很多的回调函数,其所有的API都 ...

  8. JS replace可以接受回调函数

    这是js最鲜为人知的秘密之一,v 1.3首次引入.大部分情况下repalce的使用情况如下: '10 12 13 40 50'.replace(/\d+/g,'*');//用 * 替换所有的数字 这是 ...

  9. (60)Wangdao.com第十天_JavaScript 函数_作用域_闭包_IIFE_回调函数_eval

    函数        实现特定功能的 n 条语句封装体. 1. 创建一个函数对象 var myFunc = new Function(); // typeof myFunc 将会打印 function ...

随机推荐

  1. Git 撤销修改

    Git 撤销修改 增补提交 git commit –C HEAD –a --amend -C表示复用指定提交的提交留言,这个例子中是HEAD,实际上可以指定其他有效的提交名称. 如果参数是小写的-c, ...

  2. [原创]cocos2d-x研习录-第二阶 概念类之节点类(CCNode)

    节点类CCNode在基本概念中并不存在,它是为了建立基本概念之间的关联关系而抽象出来的中间辅助类.这个类在Cocos2D-x中极为重要,它为概念类之间搭建了一座宏伟的桥梁.它的继承关系图如下:     ...

  3. 【转载】如何将Emmet安装到到 Sublime text 3?

    http://www.cnblogs.com/tinyphp/p/3217457.html 看清楚哦~~这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单 ...

  4. br与p标签区别

    首先,相同之处是br和p都是有换行的属性及意思其次,区别<br />是只需一个单独使用,而<p>和</p>是一对使用再次,br标签是小换行提行,p标签是大换行(分段 ...

  5. require 增量更新与版本管理

    使用require.js 加载JS文件时,当JS文件有更新,可以通过更改全局版本号( urlArgs : 'v=1'),告诉浏览器加载新的文件. 但该方法虽然使用方便,但美中不足的是有些不需要更新的文 ...

  6. Python内置函数&lpar;19&rpar;——eval

    英文文档: eval(expression, globals=None, locals=None) The arguments are a string and optional globals an ...

  7. JS 中offset 的小bug 与解决方案。

    一.发现bug准备工作,先定义一个div,然后给div加上样式    效果图如图所示: 二.编写正常的代码,同时给div加上一个id     会发现div图会向左缩进...直至消失. 三.添加代码bo ...

  8. 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法

    图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...

  9. Android Studio 超级简单的打包生成apk

    为什么要打包: apk文件就是一个包,打包就是要生成apk文件,有了apk别人才能安装使用.打包分debug版和release包,通常所说的打包指生成release版的apk,release版的apk ...

  10. E-R图学习笔记

    E-R图也称实体-联系图(Entity Relationship Diagram),提供了表示实体类型.属性和联系的方法,用来描述现实世界的概念模型.   方法 编辑 E-R方法是“实体-联系方法”( ...