主题:【原创】setInterval中调用函数Node参数的问题 -- 铁手
共:💬3 🌺4
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 有关,但是不了解内部机制。以后记得避免此类问题。