Javascript 建议使用多个ajax倒计时（每秒调用）

我正在创建一个有100个倒计时的系统。每个计时器每秒进行一次ajax调用，以获取数据库中的结束时间并更新倒计时时间。我需要每秒钟打一次电话，因为结束时间可能会改变。该系统目前正在工作，但速度非常慢，我很好奇是否有比每秒调用100个ajax调用更好的方法

var countDownDate;
    var is_locked;
    var interval = 1000;

    function update_timer() {
      $.ajax({
        type: 'POST',
        url: '<?php echo base_url('/Timer/getTimer');?>',
        data: {
          id: <?php echo $lane->id; ?>,
        },
        async: false,
        dataType: 'json',
        success: function (response) {
          var image_url = null;
          $.each(response, function(k, v) {
            if (k == 'end_time') {
              countDownDate = new Date(v).getTime();
            }
            if (k == 'is_locked') {
              is_locked = v;
              if (is_locked == 1) {
                $('.myButton').prop('disabled', true);
              } else {
                $('.myButton').prop('disabled', false);
              }
            }
          })
          // Get today's date and time
          var now = new Date().getTime();

          // Find the distance between now and the count down date
          var distance = countDownDate - now;
          // Time calculations for days, hours, minutes and seconds
          var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
          var seconds = Math.floor((distance % (1000 * 60)) / 1000);

          // Display the result in the element with id="demo"
          document.getElementById("demo").innerHTML =  hours + "h "
            + minutes + "m " + seconds + "s ";

          // If the count down is finished, write some text
          if (distance < 0) {
            //clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
          }
        },
        complete: function (data) {
          // Schedule the next
          setTimeout(update_timer, interval);
        }
      });
    }
    update_timer;
    setTimeout(update_timer, interval);

var倒计时；
var被锁定；
var区间=1000；
函数更新_计时器（）{
$.ajax({
键入：“POST”，
url:“”，
数据：{
id:，
},
async:false，
数据类型：“json”，
成功：功能（响应）{
var image_url=null；
$。每个（响应、函数（k、v）{
如果（k==“结束时间”）{
countDownDate=新日期（v）.getTime（）；
}
如果（k==“已锁定”）{
是否锁定=v；
如果（被锁定==1）{
$（'.myButton'）.prop（'disabled'，true）；
}否则{
$（'.myButton'）.prop（'disabled'，false）；
}
}
})
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//使用id=“demo”在元素中显示结果
document.getElementById（“demo”）.innerHTML=hours+“h”
+分钟+米+秒+秒；
//如果倒计时结束，写一些文字
如果（距离<0）{
//净间隔（x）；
document.getElementById（“demo”）.innerHTML=“过期”；
}
},
完成：功能（数据）{
//安排下一个
设置超时（更新计时器，间隔）；
}
});
}
更新定时器；
设置超时（更新计时器，间隔）；

正如@CertainPerformance所评论的，Websockets是解决这种情况的干净而漂亮的解决方案

按照@Thum Choon-Tat的建议，这个解决方案怎么样

而不是让100个计时器中的每1个都发出一个请求 第二，要获得自己的

endTime

（每秒100个请求），请每秒仅发出1个请求，然后 获取所有计时器的all结束时间

这是我的计划

• 我们将使用localStorage在所有选项卡之间共享数据。并在其中保存以下项目：

• lastRequeted

  任何HTML页面上次发出请求的时间

• requesterId

  负责触发Ajax请求的页面Id

• timerId1

  ，

  timerId2

  ，

  timerId3

  。。。。将为每个计时器保留

  endTimes

• 从100个计时器中有一个或多个计时器的任何页面都可以请求所有计时器的

  endTimes

  ，并将

  lastrequeed

  值设置为now，并将

  requesterId

  设置为其Id

• 我们每秒钟在客户端运行一次间隔来检查

  lastrequeed

  ，如果它太旧“像4秒前”，它将执行请求，如果它是新的，那么它将从

  timerIdX

  项中获取所需的数据
• 只有一个HTML页面将自己注册为

  requesterId

  除非数据太旧，否则其他HTML页面不会执行请求

这是您将在任何具有计时器的HTML上使用的JS代码

var requesterId = Math.random(); // random Id for this page

setInterval(function (){
    var ts = Math.floor(Date.now() / 1000);
    var lastRequested = localStorage.getItem('lastRequested');
    var currentRequester = localStorage.getItem('requesterId');

    if (requesterId == currentRequester ||  (ts - lastRequested > 4)){
        // if I'm the current requester or the last requested time is older than 4 seconds, I will do the request
        localStorage.settItem('requesterId', requesterId);
        $.ajax({
        type: 'POST',
        url: '/Timer/getAllTimers',
        dataType: 'json',
        success: function(data){
             localStorage.setItem('lastRequested', Math.floor(Date.now() / 1000));
             for (var i =0; i < data.length; i++){
                 var timerId = data[i].timerId;
                 var timerEndTime = data[i].timerEndTime;
                 localStorage.setItem(timerId, timerEndTime);
             }
             updateTimersEndTimes();
        }
    } else {
        // the data is updated I will get the timer endTime
        updateTimersEndTimes();

    }
}, 1000);

/**
 * update timers endTimes from the localStorage
*/
function updateTimersEndTimes()
{
     /*
      // pseudo code
      $("Div#timersOnPage .timer").each(function(){
          var timerId = $(this).data("timerId");
          var timerEndtime = LocalStorage.getItem(timerId);
          $(this).data('timerEndTime', timerEndtime);
     });

     */
}

var requesterId=Math.random（）；//此页面的随机Id
setInterval（函数（）{
var ts=Math.floor（Date.now（）/1000）；
var lastRequested=localStorage.getItem（'lastRequested'）；
var currentRequester=localStorage.getItem（'requesterId'）；
if（requesterId==currentRequester | |（ts-lastRequested>4））{
//如果我是当前请求者或上次请求的时间超过4秒，我将执行请求
settItem（'requesterId'，requesterId）；
$.ajax({
键入：“POST”，
url:“/Timer/getAllTimers”，
数据类型：“json”，
成功：功能（数据）{
setItem（'lastRequested'，Math.floor（Date.now（）/1000））；
对于（变量i=0；i

在服务器上，您将发送所有计时器的结束时间

/计时器/获取所有计时器

<?php
//buid the array from your database
$timersArray = [];
for ($i = 0; $i < 100; $i++){
    $timer = new stdClass();
    $timer->timerId = $i;
    $timer->timerEndTime = "2019-08-23 05:02:23";//changes for every timer
    $timersArray[] = $timer;
}

header('Content-Type: application/json');
echo json_encode($timersArray);
exit;

---

<代码> WebSosits，也许？100个倒计时计时器在同一HTML页面上工作吗？还是1个Ajax调用所有计时器的数据？@