JavaScript 闭包(函数)解决setInterval(或事件绑定)在最后才执行时变量值“出错”的问题

最新推荐文章于 2024-01-15 16:03:58 发布
最新推荐文章于 2024-01-15 16:03:58 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript 闭包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houyanhua1/article/details/79844718
版权
本文探讨了JavaScript中由于setInterval等异步执行导致变量值错误的问题，并提出了利用闭包作为解决方案，通过函数配合形参来限定作用域，确保变量值的正确性。
摘要由CSDN通过智能技术生成

JS会先执行主要代码,最后去执行次要的代码(包括setTimeout和setInterval中注册的函数,以及事件的绑定操作)。最后才会执行就可能会导致变量的值"出错"的可能。
解决方式：(函数配合形参)(JS中只有函数可以限定作用域)

1.闭包(函数)的方式

2.立即执行函数表达式的方式  https://blog.csdn.net/houyanhua1/article/details/79844876


demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //线程：一个线程一次只能处理一件事情，多个线程就可以多个事情同时进行
        //JS是单线程的！
        //JS中，分了三个任务
            //1.渲染任务
            //2.js的代码执行任务
最低0.47元/天 解锁文章
houyanhua1
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解JavaScript 闭包究竟是什么
10-27
在第一个例子中，当为`#divTest`中的每个`span`元素绑定`onclick`事件时，`for`循环中的匿名函数引用的是同一个变量`i`。当循环结束，`i`的最终值为4，因此所有点击事件都显示4。为了解决这个问题，可以使用闭包来...
探寻Javascript执行效率问题
12-02
全局变量在JavaScript中通常会导致效率下降，因为当在局部作用域中访问全局变量时，解释器需要遍历作用域链，直到找到变量的定义。为提高效率，应避免频繁使用全局变量，尤其是在循环或高频率执行的代码块中。可以...
js中setInterval中出现的问题
znlaojiang的博客
07-30 1094
今天在工作中遇到 要对首页进行定时刷新选择使用setInterval进行函数调用进行刷新,但是每次都是没有按照定时时间去刷新，且在执行到setInterval()时就吧定时要执行的语句执行了，完全没有实现定时，最后发现问题 是函数引用出错，我引用时加了括号且没有引号,导致直接执行函数而没有实现定时器，正确的引用应该不用括号直接函数名且不用引号。或者有引号加括号‘function（）’
setinterval 必报_setInterval中的变量问题？这是闭包问题么？
weixin_29635155的博客
01-14 348
MMTTMM**因为你每次调用函数goTop,又let i=0;把i重新声明为0了要输出1234....只需要把let扔出去**leti=0;vargoTop=function(){i++;console.log(i);}setInterval(goTop,1000)顺便下面这个才叫闭包：闭包的二大要点：// 1、在...
javascript闭包
张庆超的博客
01-31 334
闭包的概念:   闭包就是能够读取其他函数内部的函数 也可以理解为定义在一个函数内部的函数 闭包的用途: 读取函数内部的变量让这些变量的值始终保持在内存中 闭包的注意点: 由于闭包会使得函数中的变量都被保存,内存消耗很大在IE中可能导致内存泄漏。解决方法是退出函数之前将不使用的局部变量全部删除闭包可以在父函数外部,改变父函
使用setInterval导致事件的多重绑定问题
iteye_4858的博客
11-19 222
使用定时器常常会出现一些时间紊乱的问题，之前我就遇到过使用setInterval产生动画，当一中断事件不断的被触发，这个就很可能会导致时间紊乱、动画紊乱的问题，想必大家在也都经历过这样的问题，解决这个问题的方法是，构造在某时刻只存在一条时间线的机制，延迟事件触发，这个将在以后的文章中讨论，今天发现了一个问题，使用setInterval会导致同一绑定的多重触发，代码如下 [code="java...
js中的for循环结束后设置执行事件（ 与setInterval和setTimeout一起用）
weixin_30808253的博客
02-27 2054
在js for循环中的定时器。正常来讲循环多少次就会触发多个定时 例如 var time for (var i=0;i<3;i++){ time=setTimeout(()=>{ console.log('定时器') },100) } 　　这样会打印出3次定时器 ...
javascript让setInteval里的函数参数中的this指向特定的对象
12-10
在JavaScript编程中，`setInterval` 和 `setTimeout` 是用于定时执行函数的两个核心方法。然而，它们存在一个常见的陷阱：在这些定时器内部的函数中，`this` 关键字通常不会指向调用该函数的对象，而是指向全局对象...
详解JS中定时器setInterval和setTImeout的this指向问题
10-20
JavaScript中的定时器`setInterval`和`setTimeout`是开发者经常使用的功能，它们允许代码在特定的时间点或间隔执行。这两个函数对于实现动画效果、异步处理等场景非常有用。然而，`this`关键字在这些定时器函数中的...
深入理解Javascript箭头函数中的this
10-20
1. **闭包**：创建一个局部变量（如`self`或`that`），将期望的`this`值保存在这个变量中，然后在回调函数中使用这个变量。例如： ```javascript Countdown.prototype.start = function() { var self = this; ...
JS使用setInterval定时器导致前端页面卡死
田螺姑娘的博客
10-20 8473
JS使用setInterval定时器导致前端页面卡死 原因 setinterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死你的网页。 其原因与JS引擎线程有关（需深入研究JS引擎线程） ，但是setTimeout是自带清除定时器的。 解决方案 self.setInterval(() => { self.setTimeout(() => { this.queryChartTime() }, 0) }, 10000) ...
setInterval 定时器立即执行一次，再定时执行
棠樾的博客
07-13 1万+
setInterval 定时器立即执行一次，再定时执行
setInterval 正确用法
最新发布
weixin_45974445的博客
01-15 1340
setInterval 的实际使用要注意的内容及正确示例
setInterval立即触发一次以及setInterval同步执行的解决办法
热门推荐
zhouyingxiong的博客
09-10 3万+
实现setInterval刷新页面立即执行一次 问题：setInterval函数在刷新页面的时候第一次执行需要等到设置的循环时间到才执行 方法1：在setInterval函数前写一遍要执行的js代码（可实现，但不雅观），代码如下： console.log(“立即执行”); setInterval(function(){ console.log(“立即执行”); },10000) 方法2：代码如下： function fn() { console.log(“立即执行”); return
JavaScript：setInterval() 用法详解
孙悟空
06-03 3万+
本文介绍了js中setInterval() 的用法，如何使用，如何停止。
关于使用setinterval定时器递增的时候出现的数据混乱（初学者笔记本）
weixin_51199941的博客
03-09 290
使用定时器递增数据时出现的数据混乱
小程序setInterval定时器不立即触发问题
m0_66378716的博客
04-15 1141
在做一个数据库数据实时显示的功能时，发现前端总是隔一段时间才显示数据。一开始以为是网速问题，但后来发现不管怎样都是这样的规律。经过简单的排查，发现是定时器的问题。setInterval不会立即执行，而是要等待一次设置的延迟时间才触发。有一个比较笨的方法，就是在setInterval函数前写一遍要执行的js代码。
setTimeout()与setInterval()
bestyinjun的专栏
08-18 341
setTimeout()与setInterval()
JavaScript定时器setInterval如何做到在定义时先执行一遍（可用setTimeout实现同样目的）
carcarrot的博客
07-18 1598
有，只要定义一个返回“定时执行函数”（如“waitUploadThenSave”）的“执行过程”， 将“定时执行函数”保存并调用一次，并且执行过程中返回该“定时执行函数”，将该“执行过程”的主体作为定时器要定时执行的function即可。JavaScript中的定时器setInterval是计时到才会开始执行，有没有办法再定义的时候就先调用一遍，然后再定时执行呢？
JavaScript 闭包函数
05-03
JavaScript 闭包是指函数能够记住并访问在其词法作用域（声明时的作用域）之外的变量。闭包函数可以实现私有变量，模块化，以及一些高级的编程技巧。 闭包函数的实现方式是在函数内部声明一个函数，这个函数可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值