Ajax请求计时器更新间隔

Ajax request for a timer update gapping

本文关键字：更新 计时器 请求 Ajax      更新时间：2023-09-26

我在DB中有一个表，其中包含启动/停止计时器的时间，并且在我的索引中，我得到a以秒为单位显示剩余时间。每1秒有一个ajax请求

function timer(){
$.ajax({
    type: "GET",
    url: "timeleft.php",
    success: function(msg){
        $('#timeleft').html(msg);
        }
    });
}
setInterval(timer, 1000);

问题是:计时器没有正确显示剩余时间，有时它只更新5到5秒(120,115,110)，更新需要5秒，有时它像这样120,115,114,109,108,103(5秒卡住然后1秒更新OK)最奇怪的是，当我在chrome上按下f12看看发生了什么事时，计时器开始像魅力一样工作。而timeleft.php请求的加载时间为200~400ms。在同一页面中没有其他函数或任何东西有任何5秒的间隔。我不知道这是为什么，请帮帮我。非常感谢

编辑:问题真的不是在javascript。是timeleft.php没有更新好。

<?php
@include_once ("set.php");
$game = fetchinfo("value","info","name","current_game");
$r = fetchinfo("starttime","games","id",$game);
if($r == 2147483647) die("120");
$r += 120-time();
if($r < 0) $r = 0;
echo $r;
?>

设置"starttime"后，我在浏览器中访问这个页面并一直按f5，它不是实时更新的。会是什么呢?Thank You

您必须考虑到Ajax请求有自己的处理时间，可能在200~400ms之间。随着时间的推移，这将大大扭曲剩余的时间。这就是为什么依赖于数据库的轮询计时器在准确性是必要条件时不适合的原因。

你为什么要这样对待这件事?在我看来，这样做的正确方法是在一个ajax请求中获取计时器的过期时间，然后用javascript倒计时。

    var timerEnds=0;
    function startTimer(){
      if(timeDelay!=null || timeDelay != undefined){
        clearInterval(timeDelay);
        clearInterval(checkTime);//IF USING 5 SECOND SYNC
        }
    $.ajax({
        type: "GET",
        url: "timeleft.php",
        success: function(msg){
            timerEnds=msg;
            var timeDelay= setInterval(updateTimer,1000);
            
          
            var checkTime= setInterval(startTimer,5000);//Include this line to sync your expire time with server every 5seconds
            }
        });
    }
    function updateTimer(){
      
           remainingTime=timerEnds-(Date.now()/1000);
         
          if(remainingTime>-1){
              remainingMinutes=Math.floor(remainingTime/60);
           remainingSeconds=Math.floor(remainingTime-ticketMinutes*60);
           $("timer").html(remainingMinutes+":"+remainingSeconds);
            }else{
              //USE THE FOLOWING TO UPDATE EXPIRE TIME AFTER TIME EXPIRES
              remainingTime=0;
               remainingMinutes=Math.floor(remainingTime/60);
           remainingSeconds=Math.floor(remainingTime-ticketMinutes*60);
           $("timer").html(remainingMinutes+":"+remainingSeconds);
              startTimer();
              }
      }

当然你需要编辑你的php来给出计时器过期时间的时间戳。但这将节省带宽，并应防止延迟影响您的计时

相关文章：