JavaScript同时执行页面调整大小和重新加载事件

我正在尝试同时执行窗口大小调整和页面重新加载事件。当屏幕大小小于768px时，我将向元素添加一个属性。我还需要在重新加载页面时添加该属性以及特定的大小，而不仅仅是在调整页面大小时。我下面的代码可以工作，除了当我的屏幕大小hs<769 px时，添加属性需要几秒钟，这会影响它的外观。关于如何解决这个问题有什么建议吗

window.onload = function(event) {

var element = document.querySelector('.filter-select');

if (window.innerWidth < 768)  {
  element.classList.add('testing');
  element.removeAttribute("size", "4")
  element.removeAttribute("multiple", "yes")    
} else {
       element.classList.remove('testing');
    }    
}


document.addEventListener("DOMContentLoaded", function(event) {
  var element = document.querySelector('.filter-select');

  function resize() {
    if (window.innerWidth < 768) {
      element.classList.add('testing');
      element.removeAttribute("size", "4")
      element.removeAttribute("multiple", "yes")
    } else {
      element.classList.remove('testing');
    }
  }
  window.onresize = resize;
});

window.onload=函数（事件）{
var元素=document.querySelector（'.filter select'）；
如果（窗内宽度<768）{
element.classList.add（'testing'）；
元素。删除属性（“大小”，“4”）
element.removeAttribute（“多个”、“是”）
}否则{
element.classList.remove（'testing'）；
}    
}
document.addEventListener（“DOMContentLoaded”），函数（事件）{
var元素=document.querySelector（'.filter select'）；
函数resize（）{
如果（窗内宽度<768）{
element.classList.add（'testing'）；
元素。删除属性（“大小”，“4”）
element.removeAttribute（“多个”、“是”）
}否则{
element.classList.remove（'testing'）；
}
}
window.onresize=调整大小；
});

我唯一的猜测是，在不同的事件下，相同的过程加倍，而这些事件发生在不同的时间，因此存在明显的延迟。。如果这不能解决。。这是一个令人惊讶的问题，我已经投了赞成票

function resize() {
  var element = document.querySelector('.filter-select')
  if (window.innerWidth < 768) {
    element.classList.add('testing')
    element.removeAttribute("size", "4")
    element.removeAttribute("multiple", "yes")
  }
  else {
    element.classList.remove('testing');
  }
}
window.onload=resize

function resize（）{
var元素=document.querySelector（'.filter select'）
如果（窗内宽度<768）{
element.classList.add（'testing'）
元素。删除属性（“大小”，“4”）
element.removeAttribute（“多个”、“是”）
}
否则{
element.classList.remove（'testing'）；
}
}
window.onload=调整大小

我唯一的猜测是，在不同的事件下，相同的过程加倍，而这些事件发生在不同的时间，因此存在明显的延迟。。如果这不能解决。。这是一个令人惊讶的问题，我已经投了赞成票

function resize() {
  var element = document.querySelector('.filter-select')
  if (window.innerWidth < 768) {
    element.classList.add('testing')
    element.removeAttribute("size", "4")
    element.removeAttribute("multiple", "yes")
  }
  else {
    element.classList.remove('testing');
  }
}
window.onload=resize

function resize（）{
var元素=document.querySelector（'.filter select'）
如果（窗内宽度<768）{
element.classList.add（'testing'）
元素。删除属性（“大小”，“4”）
element.removeAttribute（“多个”、“是”）
}
否则{
element.classList.remove（'testing'）；
}
}
window.onload=调整大小

是的，谢谢，不幸的是，这没有解决问题，因此仍在寻找解决方案@凯瑟琳：我把它书签了。。如果两天内还没有解决这个问题，这可能是我的第一笔赏金placement@KatherineMichelle看来这个问题还没有解决huhyes谢谢，不幸的是这个问题没有解决，所以还在寻找解决方案@凯瑟琳：我把它书签了。。如果两天内还没有解决这个问题，这可能是我的第一笔赏金placement@KatherineMichelle这个问题似乎还没有解决，huhIt在您的情况下可能没有用处，但在使用非动态网站（非SPA）时在后端渲染所有元素，然后用css在某个断点处隐藏不需要的元素，这几乎总是比较容易的。如果您有常用的断点，您只需添加一个帮助器类，以后可以重用它。例如，大多数css框架都有类似的功能。只要你的css在标题链接中，并且没有异步加载，你就不会出现闪烁。这在你的情况下可能不会有用，但在处理非动态网站（非SPA）时，几乎总是更容易在后端渲染所有元素，然后在css的某个断点处隐藏你不需要的元素。如果您有常用的断点，您只需添加一个帮助器类，以后可以重用它。例如，大多数css框架都有类似的功能。只要你的css在标题链接中并且没有异步加载，你就不会出现闪烁。