开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

setTimeout闭包未按预期工作时，that = $(this)

setTimeout闭包未按预期工作时，that = $(this)是一种常见的解决方案。在JavaScript中，setTimeout函数用于在指定的时间间隔后执行一段代码。然而，由于JavaScript的事件循环机制，setTimeout函数中的回调函数可能会在闭包中执行，导致this的指向发生变化。

为了解决这个问题，可以使用that = $(this)的方式来保存当前的this指向。这样，在闭包中就可以通过that来访问到正确的this对象。

具体来说，$(this)是jQuery库中的一个方法，用于将DOM元素包装成一个jQuery对象。通过使用$(this)，可以确保that变量引用的是当前的DOM元素。

setTimeout闭包未按预期工作时，可以按照以下步骤进行修复：

在需要使用setTimeout的地方，先将this保存到一个变量that中，即that = $(this)。
在setTimeout的回调函数中，使用that来访问正确的this对象。

这样做的好处是可以避免this指向发生变化，确保在闭包中能够正确地访问到需要的对象。

推荐的腾讯云相关产品和产品介绍链接地址：

云服务器（Elastic Cloud Server，ECS）：提供弹性计算能力，满足不同规模业务的需求。详情请参考：https://cloud.tencent.com/product/cvm
云数据库MySQL版（TencentDB for MySQL）：提供高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
云原生容器服务（Tencent Kubernetes Engine，TKE）：提供高度可扩展的容器化应用管理平台。详情请参考：https://cloud.tencent.com/product/tke

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

六、setTimeout与循环闭包经典面试题详解

我在详细图解作用域链与闭包[1]一文中的结尾留下了一个关于setTimeout与循环闭包的思考题。...actions.'); 思考一下，当我将setTimeout的延迟时间设置为0时，上面的执行顺序会是什么？...OK，关于setTimeout就暂时先介绍到这里，我们回过头来看看那个循环闭包的思考题。...而我们想要让输出结果依次执行，我们就必须借助闭包的特性，每次循环时，将i值保存在一个闭包中，当setTimeout中定义的操作执行时，则访问对应闭包保存的i值即可。...利用断点调试，在chrome中查看执行顺序与每一个闭包中不同的i值当然，也可以在setTimeout的第一个参数处利用闭包。

1.1K1 0

同步、异步、回调执行顺序之经典闭包setTimeout分析

你打电话去订酒店，电话另一边的工作人员需要查下他们的管理系统才能告诉你有没有房间。...这时候你有两种选择：一种是不挂电话一直等待，直到工作人员查到为止（可能几分钟也可能几个小时，取决于他们的办事效率），这就是同步的。...（上图转引自Philip Roberts的演讲《Help, I'm stuck in an event-loop》））简单的说，如果我们指定过回调函数，那么当事件发生时就会进入事件队列，等待主线程的...当然也有同步回调），所以也就并不难理解，回调和异步之间其实并没有直接的联系，回调只是异步的一种实现方式，通过这样的event loop我们其实可以分析出三者的执行顺序，即同步 > 异步 > 回调经典闭包...7 8 console.log( i ); 我们都知道es5中变量作用域是函数，而es6却可以使用let声明一个具有块级作用域的i，在这里也就是for循环体；在这里let本质上就是形成了一个闭包

1.3K10 1

图例详解那道setTimeout与循环闭包的经典面试题

Question 题目描述如下： Answer 在最初学习setTimeout的时候，我们很容易知道setTimeout有两个参数，第一个参数为一个函数，我们通过该函数定义将要执行的操作。...OK，关于setTimeout就暂时先介绍到这里，我们回过头来看看那个循环闭包的思考题。...而我们想要让输出结果依次执行，我们就必须借助闭包的特性，每次循环时，将i值保存在一个闭包中，当setTimeout中定义的操作执行时，则访问对应闭包保存的i值即可。...而我们知道在函数中闭包判定的准则，即执行时是否在内部定义的函数中访问了上层作用域的变量。因此我们需要包裹一层自执行函数为闭包的形成提供条件。...因此，我们只需要2个操作就可以完成题目需求，一是使用自执行函数提供闭包条件，二是传入i值并保存在闭包中。当然，也可以在setTimeout的第一个参数处利用闭包。

1842 0

Python新手如何进行闭包时绑定变量操作

搞不清楚在闭包（closures）中Python是怎样绑定变量的看这个例子： def create_multipliers(): ......of i: 10437216, value: 1 id of i: 10437248, value: 2 id of i: 10437280, value: 3 到此这篇关于Python新手如何进行闭包时绑定变量操作的文章就介绍到这了...,更多相关Python闭包时绑定变量实例内容请搜索ZaLou.Cn

4081 0

使用 React Hooks 时需要注意过时的闭包!

Hooks 严重依赖于 JS 闭包。这就是为什么 Hooks 如此具有表现力和简单，但是闭包有时很棘手。使用 Hooks 时可能遇到的一个问题就是过时的闭包，这可能很难解决。...即使 value 变量在调用increment()时被增加多次，message变量也不会更新，并且总是保持一个过时的值 "Current value is 0"。过时的闭包捕获具有过时值的变量。...在这里，闭包log()捕获到count变量为0。之后，即使在单击Increase按钮时count增加，计时器函数每2秒调用一次的log()，使用count的值仍然是0。...计数器仅更新为1，而不是预期的2。每次单击setTimeout(delay, 1000)将在1秒后执行delay()。delay()此时捕获到的 count 为 0。...4.总结当闭包捕获过时的变量时，就会发生过时的闭包问题。解决过时闭包的有效方法是正确设置React钩子的依赖项。或者，在失效状态的情况下，使用函数方式更新状态。 ~完，我是小智，我要去刷碗了。

1.9K3 0

闭包 + 局部作用域 === 如鱼得水

《你不知道的JavaScript》第一部分作用域和闭包第4篇。在掌握作用域的前提下，才能真正理解和识别闭包。...闭包：当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。...由于setTimeout是异步的，所以每次for循环时js都会挂起setTimeout这个异步任务，等到for循环这个同步任务执行完毕时，系统才会执行异步的任务队列，即执行setTimeout的回调函数...想到块作用域，ES6中的let关键字不是可以主动生成块作用域的么，把上例改一下，可以更简便的实现预期设想： for(let i=1; i<=5; i++){ setTimeout(function...块作用域 + 闭包，简直不要太如鱼得水。闭包的作用强大，还可以用来写模块。

5853 0

当面试官问你闭包时，他究竟想听到些什么？

“请你讲一下闭包”——这道题几乎是前端面试必问的问题，今天我试着总结一下如何优雅的回答这道题闭包是什么？闭包是有权限访问其他函数作用域内的变量的一个函数。...闭包解决了什么？请放心，就凭上面那段话，面试官是不会善摆干休的。他一定会继续追问，一般来说会问——闭包解决了什么问题。...我的回答会是下面的样子：闭包随处可见，一个Ajax请求的成功回调，一个事件绑定的回调方法，一个setTimeout的延时回调，或者一个函数内部返回另一个匿名函数，这些都是闭包。...闭包有哪些原理比较深奥：要想完全掌握闭包，一定要清楚函数作用域、内存回收机制、作用域继承等，然而闭包是随处可见的，很可能开发者在不经意间就写出了一个闭包，理解不够深入的话很可能造成运行结果与预期不符。...闭包闭包是JavaScript这门语言中非常重要但又难以掌握的概念。

1K5 0

《你不知道的JavaScript》：闭包与局部作用域

《你不知道的JavaScript》第一部分作用域和闭包第4篇。在掌握作用域的前提下，才能真正理解和识别闭包。...闭包：当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。...由于setTimeout是异步的，所以每次for循环时js都会挂起setTimeout这个异步任务，等到for循环这个同步任务执行完毕时，系统才会执行异步的任务队列，即执行setTimeout的回调函数...想到块作用域，ES6中的let关键字不是可以主动生成块作用域的么，把上例改一下，可以更简便的实现预期设想： for(let i=1; i<=5; i++){ setTimeout(function...块作用域 + 闭包，简直不要太如鱼得水。闭包的作用强大，还可以用来写模块。

5082 0

js闭包就那么回事

今天了解了一下js闭包这块的内容，还是有点诡异的，将实践结果记录一下，看完只后，我敢说，闭包就那么回事，所谓的闭包，其实就是客户端开发中，其实就是叫做内存泄漏,就是不当引用导致对象没法得到释放，哈哈，玩笑开得有点过了...(i) }, i * 1000) })() } 使用一个IIFE将其包裹起来，那么实际的执行结果将会符合我们的预期吗？...没错，同样的道理，并不符合我们的预期。...，那么为什么，我们分析setTimeout所处的作用域中，IIFE每次执行，相当于甩出了一个闭包，每个j都是独立私有的，不在是外面那个i（等同于全局变量）。因此，执行结果符合我们的预期。...) }, j * 1000) } image.png 仅仅只是换了一个let，就做到了我们的想要的预期结果，那么这是为什么呢？

64712 1

JavaScript闭包和匿名函数的关系详解

前面讲了一篇在for加setTimeout输出内容，我们用到了一个闭包，但同时也可以说是匿名函数，到底匿名函数和闭包有没有关系呢？...闭包 js闭包是指有权访问另一个函数作用域中的变量的函数,个人认为js闭包最大的用处就是防止对全局作用域的污染。...更多介绍：浅谈JavaScript中的闭包我们可以分离出上面的第一个立即执行函数 function box(i){ setTimeout(function(){ console.log...在这种情况下，闭包机制通常是使特定代码段按预期工作的重要因素，而使用匿名函数而不是命名函数恰好是编码它的便捷方式。...一开始我以为匿名函数跟闭包有关系，那是因为恰好这个定时器使用了闭包和匿名函数，让我们误认为两者之间有关系，其实还有很多种方法可以解决这个问题，比如我们之前说到的setTimeout的第三个参数，同样可以得到跟使用立即执行函数同样的效果

5713 0

深入理解JavaScript闭包之什么是闭包

什么是闭包当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行的。...bar() 依然持有对该作用域的引用，这个引用就叫做闭包。这个函数在定义的词法作用域以外的地方被调用。闭包使得函数可以继续访问定义时的词法作用域。...我们的预期是每个迭代在运行时都会给自己 "捕获" 一个 i 的副本。...}, j * 1000); })(i) } 代码改成上面这样，就可以按照我们期望的方式进行工作了。...内部函数在搜索这两个变量时，只会搜索到其活动对象为止，因此永远不可能直接访问外部函数的这两个变量。不过把外部作用域中的 this对象保存在一个闭包能够访问到的变量里，就可以让闭包访问该对象了。

8133 0

JavaScript之作用域和闭包

编译阶段中的一部分工作就是找到所有的声明，并用合适的作用域将它们关联起来；因此包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理；当看到 var a = 2; 时，可能会认为这是一个声明...二、作用域闭包（1）、理解闭包当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。...循环和闭包： for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); },...i*1000 ); } 正常情况下，我们对这段代码行为的预期是分别输出数字 1~5，每秒一次，每次一个。...（4）、使用闭包的注意点由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。

6841 0

js中的闭包

闭包是js的一个难点也是它的一个特色，是我们必须掌握的js高级特性，那么什么是闭包呢？它又有什么用呢？...闭包就是用来解决这一需求的，闭包的本质就是在一个函数内部创建另一个函数。...我们首先知道闭包有3个特性： ①函数嵌套函数 ②函数内部可以引用函数外部的参数和变量 ③参数和变量不会被垃圾回收机制回收本文我们以闭包两种的主要形式来学习在这段代码中，a()中的返回值是一个匿名函数...原来由于js是单线程的，所以在执行for循环的时候定时器setTimeout被安排到任务队列中排队等待执行，而在等待过程中for循环就已经在执行，等到setTimeout可以执行的时候，for循环已经结束...（ps:如果把for循环里面的var变成let，也能实现预期结果）引入闭包来保存变量i，将setTimeout放入立即执行函数中，将for循环中的循环值i作为参数传递，100毫秒后同时打印出1 2

3.1K3 0

彻底理解js中的闭包

闭包是js的一个难点也是它的一个特色，是我们必须掌握的js高级特性，那么什么是闭包呢？它又有什么用呢？...闭包就是用来解决这一需求的，闭包的本质就是在一个函数内部创建另一个函数。...我们首先知道闭包有3个特性： ①函数嵌套函数 ②函数内部可以引用函数外部的参数和变量 ③参数和变量不会被垃圾回收机制回收本文我们以闭包两种的主要形式来学习 ①函数作为返回值在这段代码中，a()中的返回值是一个匿名函数...原来由于js是单线程的，所以在执行for循环的时候定时器setTimeout被安排到任务队列中排队等待执行，而在等待过程中for循环就已经在执行，等到setTimeout可以执行的时候，for循环已经结束...（ps:如果把for循环里面的var变成let，也能实现预期结果）引入闭包来保存变量i，将setTimeout放入立即执行函数中，将for循环中的循环值i作为参数传递，100毫秒后同时打印出1 2

7161 0

JS中的for循环——你可能不知道的点。

问题1解决与相关讲解结果预期结果 0 2 1 4 2 6 3 8 4 10 运行后的结果 5 undefined 5 undefined 5 undefined 5 undefined...等到了setTimeOut预定的时间后就会执行在for遍历过程中声明的5个setTimeout。所以最终运行后会出现上面的结果，与预期结果不符。...闭包，立即执行函数想要得到预期的结果，第一种办法是使用闭包，在闭包函数内部形成了局部作用域，每循环一次，形成一个自己的局部作用域，不受外部变量变化的影响。...experience_time:{ '$lte':moment().subtract(15-item.day,'day').endOf('day') ,//获取四天前都0时0...分秒 '$gte':moment().subtract(15-item.day,'day').startOf('day') ,//获取四天前都0时0分秒

2.4K1 1

循环中的异步&&循环中的闭包

(() => { console.log(index); }, 1000*index); } } foo() 方式四，通过闭包实现开始讨论方式四之前我推荐先阅读一遍我之前写过一篇文章...，5个index变量，分别是0，1，2，3，4，相互独立，互不影响，输出了预期的结果如果说每次循环都会生成一个独立的作用域用来保存index，问题就会得到解决，所以，我们通过闭包来实现 const...中的匿名回调函数中引用了函数fun中的局部变量j，所以当fun执行完毕后，变量j不会被释放，这就形成了闭包当然我们可以对此进行一下优化 const array = [1, 2, 3, 4, 5...也可以使用闭包，模拟实现let 在实际开发过程中，循环调用异步函数，比demo要复杂，可能还会出现if和else判断等逻辑，具体的我们下次再续参考通过for循环每隔两秒按顺序打印出arr中的数字 setTimeOut...和闭包《你不知道的JavaScript》上卷

1.6K2 0

React Hook 和 Vue Hook

例如，当使用多个 mixin 读取组件的模板时，可能很难确定从哪个 mixin 注入了特定的属性。命名空间冲突。...Mixins 可能会在属性和方法名称上发生冲突，而 HOC 可能会在预期的 prop 名称上发生冲突。性能问题，HOC 和无渲染组件需要额外的有状态组件实例，这会降低性能。...三、React Hooks 中的闭包问题 Hooks 严重依赖于 JS 闭包,但是闭包有时很棘手，当咱们使用一个有多种副作用和状态管理的 React 组件时，可能会遇到的一个问题是过时的闭包。...使用新的闭包解决过时闭包的第一种方法是找到捕获最新变量的闭包。找到捕获了最新 message 变量的闭包，就是从最后一次调用 inc() 返回的闭包。...React Hook解决过时闭包问题的方法: 解决过时闭包的一个有效方法是正确设置 React Hook 的依赖项。对于过时的状态，使用函数方式更新状态。

2K2 0

使用React Hooks 时要避免的5个错误！

3.不要创建过时的闭包 React Hook 很大程序上依赖于闭包的概念。依赖闭包是它们如此富有表现力的原因。 JavaScript 中的闭包是从其词法作用域捕获变量的函数。...当使用 Hook 接受回调作为参数时(如useEffect(callback, deps)， useCallback(callback, deps))，你可能会创建一个过时的闭包，一个捕获了过时的状态或变量的闭包...我们来看看一个使用useEffect(callback, deps) 而忘记正确设置依赖关系时创建的过时闭包的例子。...log 函数是一个过时的闭包，因为它捕获了一个过时的状态变量count。...正如预期的那样，状态变量count每秒钟都会增加。在进行递增操作时，单击umount 按钮，卸载组件。React会在控制台中警告更新卸载组件的状态。 ?

4.2K3 0

我从来不理解JavaScript闭包，直到有人这样向我解释它

所以当我们再次打印 food 变量时，就会报错，告诉我们该变量不存在。那么，如何在函数销毁后也能继续使用变量 food 呢？这就涉及到了要使用闭包。...闭包的缺点说完闭包的优点，接下来来看一下闭包的缺点。局部变量本来应该在函数退出时被解除引用，但如果局部变量被封闭在闭包形成的环境中，那么这个局部变量就能一直生存下去。...之所以说这是闭包，是因为 setTimeout 中的匿名函数对外部变量（自由变量）进行访问，然后该函数又被 setTimeout 方法引用。满足了形成闭包的两个条件。...1000); } 我们预期的结果是过 1 秒后分别输出 i 变量的值为 1，2，3。...如果要销毁一个闭包，可以把被引用的变量设置为 null，即手动清除变量，这样下次 JS 垃圾回收机制回收时，就会把设为 null 的量给回收了。

3135 0

14 - JavaScript 中的闭包

我认为 JavaScript 中的闭包是一个高级话题，是一个面试中经常被提到的问题。若你读了我之前的文章或了解 JavaScript 中的作用域，那理解闭包会轻松些。...每次我调用 accelerate时，不仅仅是可以获取变量而且是在上次的值基础上再增加然后返回。使用闭包创建私有变量我们继续使用 carMonitore 的例子。...这可以帮助你认识到闭包的强大。...常见面试问题下面是一些面试中经常问道的闭包问题：你认为下面的代码输出什么： for (var i = 0; i <= 5; i++) { setTimeout(function () {...我们将借助闭包来帮助你实现预期的答案： for (var i = 0; i <= 5; i++) { (function (i) { setTimeout(function ()

6823 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭