仅触发一次调整大小答案

【问题标题】：Trigger resize only once仅触发一次调整大小
【发布时间】：2021-08-14 20:43:15
【问题描述】：

我试图在调整客户端窗口大小时反转两个 div，但我的函数循环。我知道使用 flexbox 可以很容易地做到这一点，但我更感兴趣的是了解如何使用 JS 使其工作。刚开始学习 JS，正在试验函数。

当客户端的窗口低于 58em 时，我希望 div 重新排列 - 例如 flex-direction: column-reverse;。当窗口未调整大小或大小大于 58em 时，该函数不应执行任何操作

var reverse = document.querySelectorAll(".reverse");

function reverseChildren(parent) {
  for (var i = 1; i < parent.childNodes.length; i++){
    parent.insertBefore(parent.childNodes[i], parent.firstChild);
  }
}

window.addEventListener('resize', function () {
if (window.matchMedia("(max-width: 58em)").matches) {
    for (i = 0; i < reverse.length; i++) {
      reverseChildren(reverse[i]);
    }
  }
});

<div class=" reverse">
  <div class="first">
    <h4>some text</h4>
  </div>

  <div class="second">
    <img src='https://images.unsplash.com/photo-1430026996702-608b84ce9281?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=363a88755a7b87635641969a8d66f7aa' alt="Registration screen">
  </div>
</div>

【问题讨论】：

I am trying to reverse two divs 你到底是什么意思？
请检查整页的sn-p。当客户端的窗口低于 58em 时，我希望重新排列第一个 div - 例如 flex-direction: column-reverse;。当窗口未调整大小或大小大于 58em 时，该函数不应执行任何操作

标签： javascript html css resize

【解决方案1】：

您应该监听匹配媒体而不是调整大小事件。

var reverse = document.querySelectorAll(".reverse");


/* Any other code that reverses the ordre of elements is viable within this function */
function reverseChildren(parent) {
  let children = [];
  for (var i = 0; i < parent.children.length; i++) {
    children.push(parent.children[i]);
  }
  children = children.reverse().map(item => item.outerHTML).join('');
  parent.innerHTML = children;
}



let media = window.matchMedia("(max-width: 58em)");
media.addListener(() => {
  for (var i = 0; i < reverse.length; i++) {
    reverseChildren(reverse[i]);
  }
});

<div class=" reverse">
  <div class="first">
    <h4>some text</h4>
  </div>

  <div class="second">
    <img src='https://images.unsplash.com/photo-1430026996702-608b84ce9281?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=363a88755a7b87635641969a8d66f7aa' alt="Registration screen">
  </div>
</div>
<span class="mq-value"></span>

【讨论】：