javascript - 检测由于下载栏（chrome、latest edge、firefox）而导致的窗口调整大小与一般窗口调整大小

Question

我有一个遗留的 web 应用程序，它具有超级复杂的调整大小事件绑定。它支持页面内的类似桌面的窗口（我知道......）并且它们都在调整大小时缩放。

这实际上执行得很好，除了在一种情况下：当您单击此应用程序上的 PDF 链接并将其下载到浏览器时，然后在新选项卡而不是系统查看器中打开 PDF（如果这是用户的浏览器设置）。然后当关闭选项卡并返回应用程序的选项卡时，它会在调整大小逻辑上花费过多的时间（从单击拖动窗口角落的正常调整大小逻辑时间为 ~1-3s，这就像 ~15-20s）

我认为当下载栏弹出页面并打开新标签时，可能会同时触发多个调整大小。已经有一个非常大（1500 毫秒）的去抖动器，但可能是关于打开新标签页/下载栏调整大小而不是单击拖动调整大小使去抖动器不适用于这种情况），并在关闭 PDF 和返回应用程序选项卡。

我们不能只告诉用户在系统查看器中打开他们的 PDF，我需要一些关于如何开始尝试解决此问题的指导。（或帮助我尝试的路径）。

我正在尝试的路径是：我想检测来自下载栏的调整大小，而不是出于其他原因（也许 y 增量与下载栏高度完全相同？？有没有办法做到这一点？）并且只返回false，如果没有调整50-100px，我们不在乎，当他们关闭它时，无论如何它都会正常调整大小。

标签： javascriptresizewindowwindow-resize

Answer 1

这是我过去用来处理被事件淹没的代码

import raf from 'raf'

let rafId = null

function onResize() {
  if(!rafId) {
    rafId = raf(() => {
      your_resize_function()
      rafId = null
    })
  }
}

window.addEventListener('resize', onResize)

它requestAnimationFrame用于延迟启动和一个简单的标志来阻止它被多次调用。我发现这比使用要好得多，debounce()因为它适应了调用堆栈的繁忙程度。