Question

我正在为老师创建一个基于引导的网站，这是一个小项目，我的计时器有问题。因此，该网站是用图块构建的，单击这些图块将触发填充模式的ajax功能，并最终显示模式。问题在于模态计时器。它仅在第二次显示模态时起作用。控制台中没有错误，也没有任何帮助。这是我的php输出模式：

cols.map(c => coalesce(df1(c), lit(0)) + coalesce(df2(c), lit(0)) as c)

我发现，当我第二次触发计时器（因此它不起作用）时，timer_start（）会启动，但没有创建Interval，所以对我来说，这更加令人困惑：/

这对我有帮助吗？

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>
';

更有趣的是，在电话上，ヽ（。_°）ノ

Answer 1

我对您的代码进行了一些重新设计，因此它在拨弄中起作用。您可以对其进行测试，不会出现任何问题。

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 对其进行重写，是否会显示您的问题？

Answer 2

我发现了问题！！！事实证明，浏览器正在积极地缓存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);

它是更高级的密钥处理程序。我将在代码中对其进行更改，以免触发太多时间间隔。

ajax计时器仅在第二次加载模式时起作用

2 个答案: