调整大小时设置间隔

Question

我有以下代码：

    var intervalId = "";
    var isRunning = false;
    var iCount = 0;

    function animation() {
        switch (iCount++ % 2) {
            case 0:
                $('.class1').removeClass("is-active");
                $(".class2").addClass("is-active");
                break;
            case 1:
                $('.class2').removeClass("is-active");
                $(".class1").addClass("is-active");
                break;
        }
        isRunning = true;
    }

    if (window.innerWidth > 1024) {
        intervalId = setInterval(animation, 3000);
    }

    $(window).on("orientationchange resize", function () {

        debounce(function () {
            if (window.innerWidth < 1024) {
                if (isRunning == true) {
                    clearInterval(intervalId);
                    isRunning = false;
                }
            } else if (window.innerWidth > 1024) {
                if (isRunning == false) {
                    intervalId = setInterval(animation, 3000);
                }
            }
        }, 250);
    });

我想要得到的是，在 1024+ 屏幕上 setInterval 被触发，低于 1024 的任何内容都不会被触发。但是在将大小调整为低于 1024 时，setInterval 仍然被解雇。

如有任何帮助，我们将不胜感激。

Answer 1

isRunning 逻辑无用且多余，无论是否定义intervalId。您对同一件事使用两个变量，这太过分了。

此外，您测试 window.innerWidth 两次：是 <1024 还是 >1024？第二个测试没用，如果正好1024会怎样？

这个代码块让事情变得更清晰、更简单：

debounce(function () {
    if (window.innerWidth < 1024) {
       clearInterval(intervalId);
    } else {
       if(!intervalId) intervalId = setInterval(animation, 3000);
    }
})

Answer 2

我通过将此代码用于我的调整大小功能使其正常工作。

    $(window).on("orientationchange resize", debounce(function () {
        if (window.innerWidth < 1024) {
            clearInterval(intervalId);
            intervalId = "";
        } else {
            if (!intervalId) intervalId = setInterval(animation, 3000);
        }
    }));

调整大小时设置间隔

setInterval on resize

javascript

resize

setinterval