西西河

主题:【原创】setInterval中调用函数Node参数的问题 -- 铁手

共:💬3 🌺4
全看分页树展 · 主题
家园 【原创】setInterval中调用函数Node参数的问题

javascript 中 可以用 setInterval 来实现重复定期调用函数。比如发帖时,定期保存用户所输入的内容。最近碰到个“怪”问题,涉及到传入参数是 html 文档中的 Node 时,这个 Node 里面的内容不随实际变化而变化,而是保持为之前已有内容。多半是知其然不知其所以然,了解不够深入所导致。

比如我想定期判断一个 div 里有没有 p 存在(可能会在某个时候被去除)。 大致 html 片段是这样:

<div id="D30">
 <p> javascript </p>
 <span> setInterval </span>
</div>

大致 javascript 是这样:

let divNode = document.getElementById('D30');
let aInterval = setInterval(func1, 6000, divNode);
function func1(divNode) {
 if (divNode.querySelector('p')) {
 do something
 } else {
 clearInterval(aInterval);
 }
}

逻辑上是:如果在某个时候

 
 divNode.innerHTML = '';

那么 interval 被取消,否则的话,执行重复性操作。

结果是,即使把 div 里的内容清空了,p 不存在了,divNode.querySelector('p') 返回的结果还是以前存在时候的 p。虽然在 html 里没有了 p,但是在 javascript 中还有那个 p。

但是如果把函数参数 div id,而不是 div node 时,则一切正常,符合预期

function func1(divID) {
 if (divNode.querySelector('#' + divID + ' p')) {
 ...

也就是说,在 setInterval 的时候,如果参数是 node,那么不仅仅是建立对这个 node 的引用,还同时保留了这个 node 的内容,哪怕后面在 html 中改了它的内容。

大概和 closure 有关,但是不了解内部机制。以后记得避免此类问题。

全看分页树展 · 主题
  • 相关回复 上下关系3


有趣有益,互惠互利;开阔视野,博采众长。
虚拟的网络,真实的人。天南地北客,相逢皆朋友

Copyright © cchere 西西河