Question

我已经用JS编写了一些代码，这些代码基本上应该像CSS媒体查询一样工作，并在超过视口宽度阈值时开始播放此幻灯片。我知道它是有效的，因为它是在我在控制台中调用该函数时运行的，但是我无法弄清楚为什么它不能仅按预期自行运行。

我猜我在响应部分做错了什么，或者我还没有学习到某个超级基本的错误。

到目前为止，我已经尝试过“ window.InnerWidth”，我已经尝试了“ screen.width”，“ document.body.clientWidth”和“ window.matchMedia”（老实说，我很想了解更多有关每个都是因为我刚接触JS。

以下是代码段：

function resetCards() {
  card.forEach(elem => elem.classList.remove("show"));
}
function showCards(index) {
  resetCards();
  card[index].classList.add("show");
}
function cardSlide() {
  var i = 1;

  function loop() {
    setTimeout(function() {
      showCards(i);
      i++;
      if (i < card.length) {
        loop();
      } else if (i == card.length) {
        i = 0;
        loop();
      }
    }, 4000);
  }
  loop();
}

function runShow() {
  var i = window.matchMedia("(max-width: 1024px)");
  if (i.matches) {
    cardSlide();
  } else {
    console.log("Error!");
  }
}
runShow();

Answer 1

您的代码仅一次检查。但是好消息是function runShow(e) { if (e.matches) { cardSlide(); } } window.matchMedia("(max-width: 1024px)").onchange = runShow;返回an object，作为change事件，只要媒体查询结果发生变化，您都可以触发该事件：

function runShow(e) {
  if (e.matches) {
    cardSlide();
  }
}
var match = window.matchMedia("(max-width: 1024px)");
match.onchange = runShow;
runShow(match);

如果您希望它立即运行一次，则需要主动执行该操作：

else

Live Example

当查询从匹配变为不匹配时，该示例不执行任何操作。您可能想用spread或类似的方式做某事。

Answer 2

一段时间后不检查宽度的原因是因为您正在使用setTimeout函数，该函数只能运行一次。如果要多次检查，则应使用setInterval函数。

但是您要避免这种情况，因为它不准确/无效。您可以改用eventlisteners！

就像这里所述的答案之一一样，您可以使用onchange对象的window.matchMedia事件。

满足条件时如何运行我的功能？

2 个答案: