Javascript 如何延迟代码直到窗口结束调整大小

我有以下代码：

(function () {
    var curImgId = 1;
    var numberOfImages = 4;
    window.setInterval(function() {
        if (matchMedia('(min-width: 1250px)').matches) {
            $('#bg-img').css('background-image','url(../images/background' + curImgId + '.png)');
            curImgId = (curImgId + 1) % numberOfImages;
        }
        else{
            $('#bg-img').css('background-image','url(../images/background_mini' + curImgId + '.png)');
            curImgId = (curImgId + 1) % numberOfImages;
        }
    }, 7 * 1000);
    $(window).resize(function() {
        if (matchMedia('(min-width: 1250px)').matches) {
            $('#bg-img').css('background-image','url(../images/background' + curImgId + '.png)');
            curImgId = (curImgId + 1) % numberOfImages;
        }
        else{
            $('#bg-img').css('background-image','url(../images/background_mini' + curImgId + '.png)');
            curImgId = (curImgId + 1) % numberOfImages;
        }
    });
})();

---

我试图做动画背景，但我有一个问题。当我调整窗口大小时，图像变化很快。如何修复它。如果您能改进此代码，我也将不胜感激。

使用

matchMedia

您可以收听

更改事件。只要媒体查询中的
匹配
状态发生更改，就会触发此事件

在下面的示例中，每当屏幕更改时，事件将触发，
minwidth:1250px
将匹配或停止匹配

const mediaQuery = matchMedia('(min-width: 1250px)');
mediaQuery.addEventListener('change', ({ matches }) => {
  if (matches) {
    $('#bg-img').css('background-image','url(../images/background' + curImgId + '.png)');
    curImgId = (curImgId + 1) % numberOfImages;
  } else {
    $('#bg-img').css('background-image','url(../images/background_mini' + curImgId + '.png)');
    curImgId = (curImgId + 1) % numberOfImages;
  }
});

这允许您省略
调整大小
事件，因为您不再需要在每次宽度更改时进行检查。媒体查询将在相关更改发生时通知您。
使用
匹配媒体
您可以收听
更改
事件。只要媒体查询中的
匹配
状态发生更改，就会触发此事件

在下面的示例中，每当屏幕更改时，事件将触发，
minwidth:1250px
将匹配或停止匹配

const mediaQuery = matchMedia('(min-width: 1250px)');
mediaQuery.addEventListener('change', ({ matches }) => {
  if (matches) {
    $('#bg-img').css('background-image','url(../images/background' + curImgId + '.png)');
    curImgId = (curImgId + 1) % numberOfImages;
  } else {
    $('#bg-img').css('background-image','url(../images/background_mini' + curImgId + '.png)');
    curImgId = (curImgId + 1) % numberOfImages;
  }
});

这允许您省略
调整大小
事件，因为您不再需要在每次宽度更改时进行检查。媒体查询将在相关更改发生时通知您。
我不知道Emiel的答案是否正确。如果我理解，菲利浦想要一个页面大小停止改变的代码，埃米尔的回答只是为了在改变的瞬间识别当前的媒体查询，那么它将不适用于菲利浦想要的

window.addEventListener('resize', function () {
    var initialWindowWidth = window.innerWidth;
    setTimeout(function () {
        if (initialWindowWidth == window.innerWidth) {
            functionYouWannaRun();
        }
    }, 100);
})
function functionYouWannaRun() {
    console.log('Resizing is stopped');
}

这可以帮助你。基本上，代码检查最后一次宽度调整，如果第二个大小不同，表明窗口仍在调整大小，则在100毫秒后再次检查。如果有人调整太慢，只需增加时间间隔值

如果我答错了，埃米尔可能是正确的答案。
我不知道埃米尔的答案是否正确。如果我理解，菲利浦想要一个页面大小停止改变的代码，埃米尔的回答只是为了在改变的瞬间识别当前的媒体查询，那么它将不适用于菲利浦想要的

window.addEventListener('resize', function () {
    var initialWindowWidth = window.innerWidth;
    setTimeout(function () {
        if (initialWindowWidth == window.innerWidth) {
            functionYouWannaRun();
        }
    }, 100);
})
function functionYouWannaRun() {
    console.log('Resizing is stopped');
}

这可以帮助你。基本上，代码检查最后一次宽度调整，如果第二个大小不同，表明窗口仍在调整大小，则在100毫秒后再次检查。如果有人调整太慢，只需增加时间间隔值

如果我没有理解正确，Emiel可能是正确的答案。
您希望延迟的代码是什么？您是否尝试过在
setTimeout
调用中执行您想要延迟的代码？您想要延迟的确切代码是什么？您是否尝试过在
setTimeout
调用中执行要延迟的代码？