关闭 <input type=“file”>选择文件对话框和 onchange 事件之间存在大量延迟。浏览器有点冻结

Massive delay between closing of <input type="file"> Select File Dialog and onchange event. Browser kind of freezing

提问人：Andy 提问时间：3/10/2022 最后编辑：Andy 更新时间：6/3/2023 访问量：1079

问：

有时我会遇到浏览器本机“选择文件对话框”的非常奇怪的行为。

我有一个元素可以上传单个文件。<input type="file" onchange="console.log(event.target.files)" />

通常，在“选择文件”对话框中选择文件后，会立即触发事件（分别在几毫秒后触发）。onchange

但有时浏览器会冻结，最多需要 10 秒才能调用事件。onchange

我注意到的一件事是：如果我的 Windows 资源管理器快速访问工具栏中有一个无法访问的网络驱动器（因为我没有与 VPN 连接），则这种大规模延迟问题会更频繁地发生（尽管我确实在桌面上选择了一个与此网络驱动器无关的文件）。

在所有主要浏览器（Chrome、Edge、Firefox）中都相同，因此它可能与 Windows 操作系统有关。

还有其他人面临这个问题吗？

最小可重现示例：

<html>
  <head>
    <meta charset="UTF-8" />
    <script type="text/javascript">
      let timestamp;
      function onClick() {
        window.addEventListener('focus', fileDialogClosed);
      }
      function fileDialogClosed() {
        document.getElementById('result').innerHTML =
          'File Dialog closed.<br />';
        timestamp = new Date().getTime();
        window.removeEventListener('focus', fileDialogClosed);
      }
      function onChange(file) {
        let delay = new Date().getTime() - timestamp;
        document.getElementById('result').innerHTML +=
          'onchange event called with delay of <strong>' +
          delay +
          'ms</strong>';
        document.body.querySelector('input').value = null;
      }
    </script>
  </head>
  <body>
    <h1>File Input</h1>
    <p>
      Little demo to show/measure delay between closed file input dialog and
      call of onchange event handler.
    </p>
    <input
      type="file"
      onclick="onClick()"
      onchange="onChange(event.target.files[0])"
    /><br /><br />
    <div id="result"></div>
  </body>
</html>