таймер ajax работает только каждый раз, когда загружается модал - PullRequest
Новая
       13

таймер ajax работает только каждый раз, когда загружается модал

0 голосов
/ 04 апреля 2019

Я создаю веб-сайт на основе начальной загрузки для своего учителя в виде небольшого проекта, и у меня возникли проблемы с таймером. Таким образом, этот веб-сайт построен с плитками, которые при нажатии запускают функцию ajax, которая заполняет модальные, и в конце появляется модальная. Проблема с таймером в модале. Работает только каждый второй модальный показ. Там нет ошибок в консоли или что-нибудь полезное. Это мой php вывод модальный: 

echo "<div id='timer_out' onclick='timer_start()' style='font-size: calc(35px + 5vw); font-weight: bold;'>00:00:00:000</div>";
echo "<span>Podnieś spację, aby włączyć/wyłączyć timer</span>";
echo '
    <script>
        out=$("#timer_out");
        counter="";
        running=false;
        function timer_start(){
            if(running){
                running=false;
                clearInterval(counter);
                return;
            }
            running=true;
            time=0;
            start = new Date;

            counter=setInterval(function(){
                console.log("test")
                time=new Date - start;
                h=Math.floor(time/1000/60/24);
                min=Math.floor(time/1000/60-h*1000*60*24);
                sec=Math.floor(time/1000-min*60-h*1000*60*24);
                ms=Math.floor(time-sec*1000-min*60*1000-h*1000*60*24);
                if(h<10) h="0"+h;
                if(min<10) min="0"+min;
                if(sec<10) sec="0"+sec;
                if(ms<10) ms="00"+ms;
                else if(ms<100) ms="0"+ms;
                out.text(h+":"+min+":"+sec+":"+ms);
            }, 1);
        }
        function timer_stop(){
            running=false;
            clearInterval(counter);
        }
        document.addEventListener("keyup", function(event){
            if (event.code!="Space") return;
            timer_start();
        });
        $("#mainModal").on("hide.bs.modal", function (e) {
            timer_stop();
        });
        $("#mainModal").on("show.bs.modal", function (e) {
            timer_stop();
        });
    </script>
';

Я обнаружил, что когда я запускаю таймер во второй раз (поэтому он не работает), запускается функция timer_start (), но Interval не создается, поэтому для меня это еще более запутанно: /

Вот мой Ajax, если это полезно для вас: 

modal_body=$(this).find('div.modal-body')
$.ajax({
  type: 'post',
  url: 'php/getModal.php',
  data: {
    id: '-3'
  }
}).done(function(returned){

    modal_body.html(returned);

}).fail(function(jqXHR, textStatus, errorThrown){
  alert('error'+'\n'+jqXHR+'\n'+textStatus+'\n'+errorThrown);
}).always(function(){
});

Еще интереснее то, что на телефоне все работает отлично ヽ (。_ °) ノ

Ответы [ 2 ]

0 голосов
/ 04 апреля 2019

Я НАШЕЛ ПРОБЛЕМУ !!!. Оказывается, браузер активно кеширует js-события. Итак, этот код: 

document.addEventListener("keyup", function(event){
    if (event.code!="Space") return;
    timer_start();
});

Загружается в кэш браузера всякий раз, когда я загружаю его с помощью ajax, и в первый раз он работает нормально, второй запускается, запускает таймер, а затем запускается второе загруженное событие и выключает его, то же самое для четвертого, пятого и т. Д. , Как я это исправил? Здесь: 

pressed = new Array();
document.addEventListener("keydown", function(event) {
    pressed[event.code] = false;
});
document.addEventListener("keyup", function(event){
    pressed[event.code] = true;
});

setInterval(function(){
    if (pressed["Space"]==true){
        pressed["Space"]=false;
        if (running) timer_stop();
        else timer_start();
    }
}, 50);

Это более продвинутый обработчик клавиш. Я изменю его в своем коде, чтобы он не срабатывал так много интервалов.

0 голосов
/ 04 апреля 2019

Я немного переработал ваш код, чтобы он работал в скрипке. Вы можете проверить это, никаких проблем не возникает. 

out = $("#timer_out");
counter = "";
running = false;

document.addEventListener("click", function(evt) {
  if (!running) timer_start();
  else timer_stop();
});

function timer_start() {
  running = true;
  time = 0;
  start = new Date;

  counter = setInterval(function() {
    console.log("test")
    time = new Date - start;
    h = Math.floor(time / 1000 / 60 / 24);
    min = Math.floor(time / 1000 / 60 - h * 1000 * 60 * 24);
    sec = Math.floor(time / 1000 - min * 60 - h * 1000 * 60 * 24);
    ms = Math.floor(time - sec * 1000 - min * 60 * 1000 - h * 1000 * 60 * 24);
    if (h < 10) h = "0" + h;
    if (min < 10) min = "0" + min;
    if (sec < 10) sec = "0" + sec;
    if (ms < 10) ms = "00" + ms;
    else if (ms < 100) ms = "0" + ms;
    out.text(h + ":" + min + ":" + sec + ":" + ms);
  }, 1);
}

function timer_stop() {
  running = false;
  clearInterval(counter);
}
.timer_out {
  font-size: calc(35px + 5vw);
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='timer_out' class="timer_out">00:00:00:000</div>

Показывает ли ваша проблема, если переписать ее без AJAX ?

...