Tengo el siguiente código:

    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);
    });

Lo que estoy tratando de obtener es que en una pantalla de más de 1024 se dispara el setInterval, no se dispara nada por debajo de 1024. Pero al cambiar el tamaño a menos de 1024, el setInterval aún se está disparando.

Cualquier ayuda sería muy apreciada.

0
ltjfansite 4 ago. 2017 a las 13:00

2 respuestas

La mejor respuesta

Lo hice funcionar usando este código para mi función de cambio de tamaño.

    $(window).on("orientationchange resize", debounce(function () {
        if (window.innerWidth < 1024) {
            clearInterval(intervalId);
            intervalId = "";
        } else {
            if (!intervalId) intervalId = setInterval(animation, 3000);
        }
    }));
0
ltjfansite 4 ago. 2017 a las 11:04

La lógica isRunning es inútil y redundante con intervalId definido o no. Estás usando dos variables para lo mismo, y eso es excesivo.

Además, prueba window.innerWidth dos veces: ¿es <1024 o es> 1024? La segunda prueba es inútil, ¿y qué sucede si es exactamente 1024?

Este código de bloque hace las cosas más claras y sencillas:

debounce(function () {
    if (window.innerWidth < 1024) {
       clearInterval(intervalId);
    } else {
       if(!intervalId) intervalId = setInterval(animation, 3000);
    }
})
0
Jeremy Thille 4 ago. 2017 a las 10:09