javascript - 如果屏幕宽度大于1200像素，则禁用setTimeout功能？

This question already has answers here:

How to stop/override a Jquery TimeOut function?
                                
                                    （4个答案）
                                
                        
                                6个月前关闭。
            
                    
我有16个动态创建的带有背景图像的div。我有一个函数，其中我向每个背景图像不显示任何样式添加了样式，并阻止了我一遍又一遍地循环播放。

如果屏幕宽度小于1200像素且仅在重新加载/初始化时有效，则此功能当前有效。

我现在面临的最大问题是，当init的屏幕宽度大于1200px，并且我将其调整为1000px时，动画将无法开始。

我要完成的工作是，当我缩小尺寸并超过1200px时，显示块/无显示将适用于窗口大小： 1200px，则停止工作。

工作演示：https://codepen.io/Merdzanovich/pen/abbvPGv

有人可以帮忙吗？

码：

(() => {
    const hero = document.getElementById('hero');

    if (!hero) {
        return;
    }

    const shuffle = array => {
        let currentIndex = array.length;
        let temporaryValue, randomIndex;

        while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;

            // And swap it with the current element.
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }

        return array;
    };

    const images = Array.from(Array(16).keys(), n => n + 1);
    const shuffleArray = shuffle(images);
    let imgArr = [];
    let counter = 0;

    function roll() {
        imgArr.map(img => (img.style.display = 'none'));
        imgArr[counter].style.display = 'block';
        counter++;
        if (counter === imgArr.length - 1) {
            counter = 0;
        }

        setTimeout(() => roll(), 500);
    }

    const init = () => {
        shuffleArray.forEach(image => {
            let imageDiv = document.createElement('div');
            imageDiv.className = `bg-image bg-image-bg${image}`;
            hero.appendChild(imageDiv);
            imgArr.push(imageDiv);
        });

        if (window.innerWidth < 1200) {
            setTimeout(() => roll(), 0);
        }
    };

    window.addEventListener('load', init);
})();

最佳答案

您将要使用clearTimeout

将settimeout保存到变量，以便可以在clearTimeout（）调用中引用它

var myVar;

function myFunction() {
  myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}

function myStopFunction() {
  clearTimeout(myVar);
}

编辑：也许setInterval在这里更合适，因为您将要不断检查窗口大小：

setInterval(function() {
  if (window.innerWidth < 1200) {
    // do the thing you want if its smaller than 1200
  } else {
    // do the other thing
  }
}, 3000);