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两次：是＆lt; 1024还是＆gt; 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

2 个答案: