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),但这并不重要,因为问题与执行顺序有关。
解决方案
你可能应该放一个
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/
推荐阅读
- sql - 将存储过程的 Html 输出到表或变量中
- matlab - 为嵌套的“for循环”绘制单独的图
- javascript - 如何区分输入来自手持扫描仪/枪扫描仪和 jQuery 中的键盘?
- oracle - ORACLE PL/SQL 中的表值函数
- python - 为什么许多返回字符串值的 django 内部函数现在不起作用?
- matplotlib - matplotlib - 独立颜色条的遮罩部分
- javascript - setState后如何使用reducer函数
- javascript - 对于 NodeJs Promise,Await 和 Then 哪个更好?以及等待如何工作
- javascript - 无论类型是否正确,PropTypes 都会出错
- ios - iOS:UICollectionView 内容重置和 dequeueReusableCell