时间戳

首页 > 解决方案 > JavaScript 代码执行序列，EventListener 之外的语句/代码如何工作？

javascript - JavaScript 代码执行序列，EventListener 之外的语句/代码如何工作？

问题描述

我是 JavaScript 和 chrome 调试工具的新手。而且，我很难调试下面的代码。我插入了断点以查看“键”如何获得最新的键单击，或者换句话说，何时调用它我从未看到控制器/指针const keys=document.querySelectorAll('.key');在代码行上停止。那么，如果控制器/指针在代码执行期间没有停止/到达该语句，它如何每次都从 DOM 中选择正确的键？此外，同样的事情发生在keys.forEach(, 意味着断点不起作用，所以如果控制器/指针没有在这一行停止，那么如何调用 removeTransition 回调函数？

<div class="keys">
    <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div> ... </div>
    <div> ... </div>
    <div> ... </div>
</div>


<script>
function removeTransition(e)
    {
      if(e.propertyName!=='transform') return; // skip if this is not a transform
      this.classList.remove('playing');
    }
    const keys=document.querySelectorAll('.key');
    keys.forEach(
       key => key.addEventListener('transitionend',removeTransition)
    );
</script>

完整代码在这里https://jsfiddle.net/speckyfoxabhishek/6kdye3pr/3/

注意：在上面的链接中，缺少声音文件（.wav），但这并不重要，因为问题与执行顺序有关。

标签： javascriptgoogle-chrome-devtools

解决方案

你可能应该放一个

window.onload = function () { }

确保在搜索 DOM 元素之前加载您的内容。像这样。

window.onload = function () { 
 const keys=document.querySelectorAll('.key');
    keys.forEach(
       key => key.addEventListener('transitionend',removeTransition)
    );
}

要回答您的问题，可以在加载内容之前执行脚本标记。这是一个很好的例子https://addyosmani.com/blog/script-priorities/

推荐阅读