for与onclick循环的同步和异步问题

最新推荐文章于 2022-06-23 17:04:22 发布

不及你笑靥如花

最新推荐文章于 2022-06-23 17:04:22 发布

阅读量2.3k

点赞数 7

分类专栏： js的同步与异步文章标签： javascript

本文链接：https://blog.csdn.net/qq_43775721/article/details/113875921

版权

js的同步与异步专栏收录该内容

4 篇文章 0 订阅

订阅专栏

for与onclick循环的同步和异步问题

一、产生原因
二、解决问题

一、产生原因

导致 for 循环中 onclick 不能直接定位到我们点击的按钮的原因如下：

原生JS的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的JS文件、外部的CSS文件、图片等。for循环也是在加载完成之前就执行好的，而onclick是点击的时候才加载的。
es5采用的是全局作用域。

for循环的同步和异步问题案列代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for和while循环</title>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <script>
        var btns = document.getElementsByTagName("button");
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                console.log(i);
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

二、解决问题

2.1、添加自定义属性

想要解决这个问题，我们可以通过添加自定义属性，此时每个按钮，都有自己独有的值，我们可以通过这个独有的值，来定位我们要找的按钮

        var btns = document.getElementsByTagName("button");
        for (var i = 0; i < btns.length; i++) {
            //自定义属性标签
            btns[i].index = i;
            btns[i].onclick = function() {
                console.log(this.index);
            }
        }

2.2、闭包

上诉所说，导致 for与onclick循环的同步和异步问题最大的问题，在于es5采用的是全局作用域，但是在js中我们的函数的作用域是块级的。

	 var btns = document.getElementsByTagName("button");
        for (var i = 0; i < btns.length; i++) {
           (function(i) {
                btns[i].onclick = function() {
                    console.log(i);
                }
            })(i);
        }

2.3、es6中的块级作用域（推荐）

为了解决当初es5没有块级作用域的麻烦，es6推出了let/const。所以我们直接把 var 改成 let 就可以解决问题了。

        var btns = document.getElementsByTagName("button");
        for (let i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                console.log(i);
            }
        }

不及你笑靥如花

关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
for与onclick循环的同步和异步问题

原生JS的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的JS文件、外部的CSS文件、图片等。for循环也是在加载完成之前就执行好的。for循环的同步和异步问题案列代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
复制链接

扫一扫