Мое слайд-шоу движется быстрее, чем обычно, через несколько минут - PullRequest
Новая
       3

Мое слайд-шоу движется быстрее, чем обычно, через несколько минут

0 голосов
/ 18 января 2019

Я только что создал слайд-шоу изображений, которое имеет следующий стиль:

  • Изображения, которые перемещаются через несколько секунд.
  • Некоторые круглые кнопки, которые при нажатии на них, переходятк соответствующему изображению.
  • Стрелки слева и справа для перехода к следующему изображению.

Слайд-шоу работает правильно. Но проблема возникает, когда примерно через 3 минуты работы в интернете я возвращаюсь на вкладку системы, и ползунок перемещается намного быстрее, чем обычно.Единственный способ вернуть его в нормальное состояние - это обновить страницу.

Я оставляю код, чтобы увидеть, есть ли ошибка:

HTML: 

<!--=====================================
SLIDESHOW  
======================================-->

<div class="container-fluid" id="slide">

    <div class="row">

        <!--=====================================
        SLIDESHOW 
        ======================================-->

        <ul>

            <?php

                $servidor = Ruta::ctrRutaServidor();

                $slide = ControladorSlide::ctrMostrarSlide();

                foreach ($slide as $key => $value) {    

                    $estiloImgProducto = json_decode($value["estiloImgProducto"], true);
                    $estiloTextoSlide = json_decode($value["estiloTextoSlide"], true);
                    $titulo1 = json_decode($value["titulo1"], true);
                    $titulo2 = json_decode($value["titulo2"], true);
                    $titulo3 = json_decode($value["titulo3"], true);

                    echo '<li>

                            <img src="'.$servidor.$value["imgFondo"].'">

                            <div class="slideOpciones '.$value["tipoSlide"].'">';

                                if($value["imgProducto"] != ""){

                                echo '<img class="imgProducto" src="'.$servidor.$value["imgProducto"].'" style="top:'.$estiloImgProducto["top"].'%; right:'.$estiloImgProducto["right"].'%; width:'.$estiloImgProducto["width"].'%; left:'.$estiloImgProducto["left"].'%">';

                                }                   

                                echo '<div class="textosSlide" style="top:'.$estiloTextoSlide["top"].'%; left:'.$estiloTextoSlide["left"].'%; width:'.$estiloTextoSlide["width"].'%; right:'.$estiloTextoSlide["right"].'%">

                                    <h1 style="color:'.$titulo1["color"].'">'.$titulo1["texto"].'</h1>

                                    <h2 style="color:'.$titulo2["color"].'">'.$titulo2["texto"].'</h2>

                                    <h3 style="color:'.$titulo3["color"].'">'.$titulo3["texto"].'</h3>';

                                if($value["boton"] != ""){

                                    echo '<a href="'.$value["url"].'">

                                        <button class="btn btn-default backColor text-uppercase">

                                        '.$value["boton"].' <span class="fa fa-chevron-right"></span>

                                        </button>

                                    </a>';

                                }

                                echo '</div>    

                            </div>

                        </li>';

                }

            ?>      

        </ul>

        <!--=====================================
        PAGINATION
        ======================================-->

        <ol id="paginacion">

            <?php

                for($i = 1; $i <= count($slide); $i++){

                    echo '<li item="'.$i.'"><span class="fa fa-circle"></span></li>';

                }       

            ?>

        </ol>   

        <!--=====================================
        ARROWS
        ======================================-->   

        <div class="flechas" id="retroceder"><span class="fa fa-chevron-left"></span></div>
        <div class="flechas" id="avanzar"><span class="fa fa-chevron-right"></span></div>

    </div>

</div>

<center>

    <button id="btnSlide" class="backColor">

            <i class="fa fa-angle-up"></i>

    </button>

</center>

JS 

/*=============================================
VARIABLES
=============================================*/

var item = 0;
var itemPaginacion = $("#paginacion li");
var interrumpirCiclo = false;
var imgProducto = $(".imgProducto");
var titulos1 = $("#slide h1");
var titulos2 = $("#slide h2");
var titulos3 = $("#slide h3");
var btnVerProducto = $("#slide button");
var detenerIntervalo = false;
var toogle = false;

$("#slide ul li").css({"width":100/$("#slide ul li").length + "%"})
$("#slide ul").css({"width":$("#slide ul li").length*100 + "%"})

/*=============================================   
INITIAL ANIMATION
=============================================*/

$(imgProducto[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(imgProducto[item]).animate({"top":30 +"px", "opacity": 1},600)

$(titulos1[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos1[item]).animate({"top":30 +"px", "opacity": 1},600)

$(titulos2[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos2[item]).animate({"top":30 +"px", "opacity": 1},600)

$(titulos3[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(titulos3[item]).animate({"top":30 +"px", "opacity": 1},600)

$(btnVerProducto[item]).animate({"top":-10 +"%", "opacity": 0},100)
$(btnVerProducto[item]).animate({"top":30 +"px", "opacity": 1},600)

setTimeout(function(){

    $(btnVerProducto[item]).mouseover(function(){

    $(this).css({"background":"#3CB484"});

    })

    $(btnVerProducto[item]).mouseout(function(){

    $(this).css({"background":"#35A679"});

    })

},100)



/*=============================================
PAGINATION
=============================================*/

$("#paginacion li").click(function(){

    item = $(this).attr("item")-1;

    movimientoSlide(item);

})

/*=============================================
MOVE FORWARD
=============================================*/

function avanzar(){

    if(item == $("#slide ul li").length -1){

        item = 0;

    }else{

        item++

    }

    interrumpirCiclo = true;

    movimientoSlide(item);

}

$("#slide #avanzar").click(function(){

    avanzar();

})

/*=============================================
BACK
=============================================*/

$("#slide #retroceder").click(function(){

    if(item == 0){

        item = $("#slide ul li").length -1;

    }else{

        item--

    }

    movimientoSlide(item);

})


/*=============================================
MOVEMENT SLIDE
=============================================*/

function movimientoSlide(item){

    // http://easings.net/es

    $("#slide ul").animate({"left": item * -100 + "%"}, 1000, "easeOutQuart")

    $("#paginacion li").css({"opacity":.5})

    $(itemPaginacion[item]).css({"opacity":1})

    interrumpirCiclo = true;

    $(imgProducto[item]).animate({"top":-10 +"%", "opacity": 0},100)
    $(imgProducto[item]).animate({"top":30 +"px", "opacity": 1},600)

    $(titulos1[item]).animate({"top":-10 +"%", "opacity": 0},100)
    $(titulos1[item]).animate({"top":30 +"px", "opacity": 1},600)

    $(titulos2[item]).animate({"top":-10 +"%", "opacity": 0},100)
    $(titulos2[item]).animate({"top":30 +"px", "opacity": 1},600)

    $(titulos3[item]).animate({"top":-10 +"%", "opacity": 0},100)
    $(titulos3[item]).animate({"top":30 +"px", "opacity": 1},600)

    $(btnVerProducto[item]).animate({"top":-10 +"%", "opacity": 0},100)
    $(btnVerProducto[item]).animate({"top":30 +"px", "opacity": 1},600)
}

/*=============================================
INTERVAL
=============================================*/

setInterval(function(){

    if(interrumpirCiclo){

        interrumpirCiclo = false;

    }else{

        if(!detenerIntervalo){

            avanzar();

        }

    }

},3000)

/*=============================================
APPEAR ARROWS
=============================================*/

$("#slide").mouseover(function(){

    $("#slide #retroceder").css({"opacity":1})
    $("#slide #avanzar").css({"opacity":1})

    detenerIntervalo = true;

})


$("#slide").mouseout(function(){

    $("#slide #retroceder").css({"opacity":0})
    $("#slide #avanzar").css({"opacity":0})

    detenerIntervalo = false;

})

1 Ответ

0 голосов
/ 18 января 2019

Может случиться, что setInterval события в очереди событий не будут обработаны после того, как страница оставлена ​​неактивированной (не на переднем плане) на некоторое время. Затем, когда вы вернетесь к нему, все ожидающие события будут обработаны, давая эффект «гонки».

Вы можете предотвратить это, используя цепочку setTimeout вместо одной setInterval. Следующий setTimeout будет вызван только в том случае, если текущий цикл-код эффективно выполнен: 

function nextCycle(){
    if(interrumpirCiclo){
        interrumpirCiclo = false;
    }else{
        if(!detenerIntervalo){
            avanzar();
        }
    }
    setTimeout(nextCycle, 3000);
}
setTimeout(nextCycle, 3000);
...