代码之家 › 专栏 › 技术社区 › Shruggie

jsdom操作

dom asynchronous html javascript

Shruggie · 技术社区 · 6 年前

我遇到了一个有趣的bug elt 未定义对的某些调用 switchToReady . 它看起来像里面的功能 setTimeout 正在两次传递相同的DOM节点。

function switchToReady(elt) {
    elt.setAttribute('transform', 'translate(17, 0)');
    elt.classList.remove('compiling');
}

const compilingElts = document.getElementsByClassName('compiling');
for (let i = 0; i < compilingElts.length; i++) {
    const randTime = Math.round(Math.random() * (2000 - 500)) + 500;
    setTimeout(() => {
        switchToReady(compilingElts[i]);
    }, randTime);
}

3 回复 | 直到 6 年前

CertainPerformance 6 年前

getElementsByClassName 返回一个集合,这意味着如果集合中元素的类发生更改 ,或者如果您向DOM中添加了另一个具有该类的元素,那么您所在的索引(例如,如果 i 是 2 )可能不再引用那里的旧元素-它可能引用集合中的下一个项目,或上一个项目,甚至可能是 undefined . 这种行为非常不直观,因此我建议使用 querySelectorAll 静止的 NodeList

const compilingElts = document.querySelectorAll('.compiling');

其他好处 查询选择器 :

它接受为参数的选择器字符串可以是非常

forEach 直接在 节点主义者 ,从而消除了手动迭代和跟踪指标的需要:

compilingElts.forEach((elm) => {
  const randTime = Math.round(Math.random() * (2000 - 500)) + 500;
  setTimeout(() => {
      switchToReady(elm);
  }, randTime);
});

使用数组方法比使用 for HTMLCollection 产生于 getElementsByClassName 是用 Array.prototype.forEach :

Array.prototype.forEach.call(
  compilingElts,
  (elm) => {
    // do stuff with elm
  }
);

(快捷方式是使用 [].forEach.call Array.prototype 更清楚一点(我的意思是)

Felix Kling 6 年前

getElementsByClassName 返回一个活动列表,正如您所注意到的,这意味着如果从元素中删除该类,该列表将更改(其大小)。

你可以用 document.querySelectorAll('.compiling')

Shruggie 6 年前

compilingElts 对象

推荐文章

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Rami Dhouib · Flutter:如果等待时间超过2秒,则执行操作

4 月前

Jess The Witch · GCP云功能中处理延迟任务的模式

5 月前

justiceorjustus · Javascript中异步递归函数块内部是否有同步函数调用?

5 月前

Plup · 连接失败时,PyMongo异步客户端未引发异常

6 月前

user1233894 · 尝试从全局函数传递值

6 月前

ZNackasha · 如何将Arc<RwLock<dyn Child>>转换为Arc<RwLock<dyn-Base>>

9 月前

Grigory Turlykin · 发送媒体python电报机器人(ASYNC)

9 月前

Fabiano Taioli · 管理单线程Rust中的阻塞函数

10 月前

river7816 · 为什么spdlog不在async函数中打印

10 月前