为什么使用断点时数字控件的输入事件会触发两次？

问题描述 投票：0回答：1

我有一个 

input type=number
控件，正在监听它的 
input
事件。该事件按预期触发，我的事件处理程序也按预期触发。但是，当且仅当我在事件处理程序内部放置一个断点并使用数字箭头更改值时，事件处理程序才会被调用两次 - 当我不使用断点时，事件处理程序会被触发一次（正如预期的那样）。

当我在事件处理程序中放置断点时，为什么事件处理程序会触发两次？

<html>
<body>
    <div>If you place a breakpoint inside of the event handler and then use the arrows to change the number value, you will notice the event handler is fired twice.</div>
    <input type="number" id="numberInput">
    <div id="numberDisplay"></div>

    <script>
        numberInput.addEventListener('input', OnInput_numberInput);

        function OnInput_numberInput(event) {
            // If you place a breakpoint here and use the number arrows to change the value, this handler will fire twice. Otherwise, it fires once as expected.
            numberDisplay.innerHTML = `&nbsp;${event.target.value}&nbsp;`;
        }
    </script>
</body>
</html>

javascript events event-handling
1个回答
0
投票

通过 ChatGPT...

您观察到的行为（当在其中放置断点并且使用数字箭头更改输入值时事件处理程序会触发两次）与现代浏览器和开发工具管理 JavaScript 执行的方式有关，特别是在调试器方面和事件循环。

说明

  1. 事件循环和断点:

    • 当您在事件处理程序中放置断点并且执行暂停时，JavaScript 引擎会暂时停止执行上下文。这种暂停会影响事件循环和后续事件的处理。
    • 浏览器的渲染和输入处理进程在调试条件下可能表现不同，从而导致意外行为，例如重复事件触发。

  2. 可重入:

    • 调试过程可能会引入重入，其中暂停的执行上下文可能会触发事件侦听器的额外重新评估。
    • 当您使用数字箭头更改值时，第一个事件将触发并在断点处暂停。在此暂停期间，事件循环可能会重新评估同一事件并将其再次排队，从而导致事件处理程序在恢复执行后触发两次。

  3. 特定于浏览器的调试行为：

    • 不同的浏览器对于处理 JavaScript 执行和调试的方式有不同的实现。当涉及断点时，这可能会导致事件处理方式不一致。
    • 某些浏览器可能会处理输入更改并立即在断点处暂停，而其他浏览器可能会在暂停之前继续处理事件循环中的待处理事件，从而导致事件处理程序的多次触发。

缓解策略

  1. 避免实时事件处理断点：

    • 为了避免此类问题，您可以暂时使用 
      console.log
      语句而不是断点来调试事件处理程序中的值和流程。这允许您在不暂停执行上下文的情况下检查行为。

  2. 节流或去抖：

    • 在事件处理程序中实施限制或去抖动，以减轻快速连续事件的影响。这种方法可以帮助确保处理程序逻辑以受控方式执行，即使在调试条件下也是如此。
    function debounce(func, delay) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
    };
}

const debouncedHandler = debounce(myHandler, 300);

document.getElementById('myInput').addEventListener('input', debouncedHandler);

function myHandler(event) {
    console.log('Input event fired:', event.target.value);
    // Place your breakpoint here for debugging
}

  3. 分析并简化事件处理逻辑:

    • 简化事件处理逻辑，以最大程度地减少调试条件下可能发生的任何可重入或重复事件处理的影响。

结论

所观察到的行为（在放置断点时事件处理程序触发两次）是 JavaScript 执行和事件循环与浏览器调试工具交互方式的结果。了解这种相互作用对于有效调试和维护预期行为至关重要。实施避免断点、使用控制台日志记录和应用去抖动等策略可以帮助缓解这些问题并提供更流畅的调试体验。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.