javascript - 在未来事件中使用闭包的问题

Question

我正在尝试创建一个函数，该函数捕获页面上的多个元素，迭代它们并应用 mousedown 事件监听器，然后调用另一个函数并向其传递变量中的一些数据。该变量在整个循环过程中发生变化，因此我想利用闭包，以便在触发事件时，该变量具有该迭代的预期值，而不是简单地引用循环的最后一次迭代的值。

我一直在阅读这个网站(和其他网站)上的其他答案，并且发现自己不知道如何使这项工作有效，因为无论我使用多少个看似正确的解决方案，我都会继续获得最后的值从数据来看。

以下是我尝试过的多种变体 - 每个变体在连接时显示预期值，但在触发时显示不正确的值。我非常感谢您帮助找出我在这里做错了什么。谢谢!

使用的命名法:

_externalFunction() - 我想在事件触发时调用的外部函数，并向其中传递数据对象。

changeDataValue - 我想要发送到外部函数的原始数据值。

在不同函数中使用闭包

function addMouseDown(elem, data) {
    elem.addEventListener("mousedown", function () {
        _externalFunction(data);
        console.log("triggered - mouseDown: " + data.value);
    }, false);
    console.log("attached - mouseDown: " + data.value);
}

addMouseDown(elements[i], changingDataValue);

在另一个函数中使用闭包，以及在事件监听器中使用闭包

function addMouseDown(elem, data) {
    (function(d) {
        elem.addEventListener("mousedown", function () {
            (function (e) {
                _externalFunction(e);
                console.log("triggered - mouseDown: " + e.value);
            })(d);
        }, false);
    })(data);
    console.log("attached - mouseDown: " + data.value);
}

addMouseDown(elements[i], changingDataValue);

在另一个函数中使用闭包:

function addMouseDown(elem, data) {
    (function(d) {
        elem.addEventListener("mousedown", function () {
            _externalFunction(d);
            console.log("triggered - mouseDown: " + d.value);
        }, false);
    })(data);
    console.log("attached - mouseDown: " + data.value);
}

addMouseDown(elements[i], changingDataValue);

脚本本身的闭包

(function (data) {
    elements[i].addEventListener("mousedown", function () {
       _externalFunction(data);
       console.log("triggered - mouseDown: " + data.value);
    }, false);
    console.log("attached - mouseDown: " + data.value);
})(changingDataValue);

事件处理程序内的关闭

elements[i].addEventListener('mousedown', (function(data) {
    return function() {
        _externalFunction(data);
        console.log("triggered - mouseDown: " + data.value);
    };
})(changingDataValue), false);
console.log("attached - mouseDown: " + changingDataValue.value);

效果很好，除了它实际上在事件触发之前调用外部函数，但它确实传递了预期值

(function (elem, data) {
    elem.addEventListener("mousedown", (function (d) {
        _externalFunction(d);
        console.log("triggered - mouseDown: " + d.value);
    })(data), false);
    console.log("attached - mouseDown: " + data.value);
})(elements[i], changingDataValue);

再次，我感谢任何人可以在这里提供的任何帮助。谢谢!

Answer 1

在您的elem.addEventListener中，您传递了一个自动执行的匿名函数。它本质上是发送返回值而不是对函数的引用。

换句话说，执行以下代码，然后将值(在本例中为 undefined)作为 elem.addEventListener 中的第二个参数传递:

(function (d) {
    _externalFunction(d);
    console.log("triggered - mouseDown: " + d.value);
})(data), false)

如果将其转换为普通函数调用，则当您在回调中引用它时，您的 data 变量仍将在作用域内(因为它绑定(bind)到该匿名函数)。我建议利用 call/apply 不断将 this 范围更改为单击以进行后续开发的元素。

<a href="#link1" class="link">test1</a> | <a href="#link2" class="link">test2</a>
<script>
  // Grab all of the links on the page
  var elements = document.getElementsByClassName('link');

  for (var i = 0, l = elements.length; i < l; i++) {

    // Grab an identifying attribute about the link for easy testing
    changingDataValue = {
      value: elements[i].href
    };

    // This anon function defines the scope for the elem/data vars for each iteration of the for loop
    (function(elem, data) {
      console.log("attached - mouseDown: " + data.value);
      elem.addEventListener("mousedown", function() {
        console.log("triggered - mouseDown: " + data.value);

        // Use call to preserve "this" reference (link element) in your external function
        _externalFunction.call(this, data);
      });
    })(elements[i], changingDataValue);
  }

  function _externalFunction(d) {
    // console.log(this) would output the link element that was clicked
    console.log("external function: " + d.value);
  }
</script>

如果我加载上面的代码，然后单击 link2，然后单击 link1，我会得到以下输出:

attached - mouseDown: #link1
attached - mouseDown: #link2
triggered - mouseDown: #link2
external function: #link2
triggered - mouseDown: #link1
external function: #link1