Chrome 和 Firefox 变量处理的区别

Question

我有一个 Javascript 变量的问题，它只出现在 Firefox 中而不出现在 chrome 中。

<input id="test" type="file"/>
<script>
    var f = document.getElementById('test').files;
    var value = f;
    var i = setInterval(() => {
        f = document.getElementById('test').files;
        if (f == value) {
            console.log(true);
            console.log(f);
            console.log(value);
        } else {
            console.log(false);
            console.log(f);
            console.log(value);
            value = f;
            clearInterval(i);
        }
    }, 1000);
</script>

此代码在控制台日志中保持为真，并且应该跟踪变量更改。 在 chrome 中，如果我选择一个带有文件输入标签的文件。它将跟踪变量“value”和变量“f”之间的变量差异。这将导致它进入 console.log(false) 并终止 setInterval。但是，在使用文件输入选择文件后，在 firefox 中，两个变量都会立即更新，并且 firefox 将无法跟踪任何差异。导致脚本永远不会结束。

这里有一个小提琴：https://jsfiddle.net/y9jh6a1t/

我希望在 Firefox 中复制 chrome 的行为。

Answer 1

我不明白你为什么在结束指令上使用两个分号：

var f = document.getElementById('test').files;;

浏览器（Firefox 和 Chrome）实现了两种不同的解释器，Firefox(SpyderMonkey) 和 Chrome(v8)。然后，可以让规则接受来自 Chrome 的规则，而不接受来自 Firefox 的规则，或者相反。

为防止出现bug，修复线路到达后再回来调试。

注意：我测试了您的 sn-p 并删除了双分号 (;;)。这对我有用。

好代码。

Answer 2

不确定它是否会满足您的条件。但不要使用文件，而是使用 files.length。

var f = document.getElementById('test').files.length;
    var value = f;
    var i = setInterval(() => {
        f = document.getElementById('test').files.length;
        if (f == value) {
            console.log(true);
            console.log(f);
            console.log(value);
        } else {
            console.log(false);
            console.log(f);
            console.log(value);
            value = f;
            clearInterval(i);
        }
    }, 1000);