警告不要在循环中执行函数

Question

我编写了一个代码来为 div 容器创建模态窗口。单击按钮后，我会获取按钮的编号并显示相关的模式窗口。经过测试，适用于所有浏览器。

myModalContent = new tingle.modal();
var myBtn = document.querySelectorAll("button.project__btn");
for (var i = 0; i < myBtn.length; i++) {
myBtn[i].addEventListener("click", function () {
    myModalContent.open();
    if (this.hasAttribute("data-btn")) {
        myModalContent.setContent(document.querySelector(".project" + this.getAttribute("data-btn") + "-modal").innerHTML);
    } else {
        myModalContent.setContent(document.querySelector(".project1-modal").innerHTML);
    }
});

} 一个 js 验证器会给出一个警告“不要在循环中创建函数”。 看了一些与这个主题相关的帖子，特别是函数必须在循环之外创建，我创建了一个函数：

 function handler(modalDiv, trigBtn, index){
    modalDiv.open();
    if (trigBtn[index].hasAttribute("data-btn")) {
        modalDiv.setContent(document.querySelector(".project" + trigBtn[index].getAttribute("data-btn") + "-modal").innerHTML);
    } else {
        modalDiv.setContent(document.querySelector(".project1-modal").innerHTML);
    }
}

然后在循环中调用它：

for (var i = 0; i < myBtn.length; i++) {
    myBtn[i].onclick = handler(myModalContent, myBtn, i);
}

它似乎无法正常工作，它会在网页加载后立即显示最后一个模式窗口。我的理解是该函数必须与单击事件监听器连接，即单击按钮时，应弹出模态窗口。现在，模式窗口弹出，没有任何点击事件。你能给我一个如何正确编写函数的想法吗？或者我是否应该简单地忽略这个 js 验证警告。

Answer 1

保持简单！您无需更改任何代码，只需将函数表达式移动到循环体外部的命名函数声明：

var myModalContent = new tingle.modal();
var myBtn = document.querySelectorAll("button.project__btn");
function myHandler() {
    myModalContent.open();
    if (this.hasAttribute("data-btn")) {
        myModalContent.setContent(document.querySelector(".project" + this.getAttribute("data-btn") + "-modal").innerHTML);
    } else {
        myModalContent.setContent(document.querySelector(".project1-modal").innerHTML);
    }
}
for (var i = 0; i < myBtn.length; i++) {
    myBtn[i].addEventListener("click", myHandler);
}

Answer 2

警告试图防止“修改后的闭包”出现问题。如果您的函数对变量i 做了任何操作，那么您会发现在用户单击按钮时变量i 的值始终为myBtn.length，因为这是它最后的值循环。

这个：

for (var i = 0; i < myBtn.length; i++) {
...

被这样对待：

var i;
for (i = 0; i < myBtn.length; i++) {
...

由于您没有在函数中的任何地方使用i，因此您在技术上是安全的，但未来其他开发人员可能会更改代码并最终遇到此问题。

为了以您尝试修复它的方式修复此代码，您需要拥有 handler 函数返回一个函数本身。

myBtn[i].addEventListener("click", createHandler());

function createHandler() {
    return function() {
        myModalContent.open();
        if (this.hasAttribute("data-btn")) {
            myModalContent.setContent(document.querySelector(".project" + this.getAttribute("data-btn") + "-modal").innerHTML);
        } else {
            myModalContent.setContent(document.querySelector(".project1-modal").innerHTML);
        }
    };
}

这与您的工作代码具有相同的效果，但可以防止有人尝试在闭包内使用i。如果有人在那里需要i，他们可以将其添加到createHandler 的参数列表中，它不会为每次循环重复使用相同的变量。

或者，如果您可以使用现代版本的 javascript，您可以使用 let 关键字而不是 var。

这个：

for (let i = 0; i < myBtn.length; i++) {
...

更像是这段代码在 C# 等语言中的工作方式：

for (var _ = 0; _ < myBtn.length; _++) {
    var i = _;
...

换句话说，i 变量的范围是 for 循环内部的，而不是你所在函数的全局范围。