Question

我是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）丢失了，但这没关系，因为问题与执行顺序有关。

Answer 1

您可能应该放一个

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/

JavaScript代码执行顺序，EventListener外部的语句/代码如何工作？

1 个答案: