账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    前端多终端计时如何同步?
    22
    0

    问题描述

    页面上有开始结束两个操作;点击开始后开始计时并显示计时时长;
    终端1点击开始后,计时开始;
    终端2进入页面,从服务器获取到已经开始的时间,从获取到的时间开始计时;
    终端1点击结束,计时截止,终端1显示最终持续时间;
    终端2如何知道已经结束并停止计时,且显示的最终持续时间和终端1相同?

    问题出现的环境背景及自己尝试过哪些方法

    现在想到有两种方案
    方案1:前端定时器

    写一个定时器,每隔10S去服务端取一次数据,获取当前是开始还是结束的状态,如果是结束,则结束计时,显示计时的时间;

    存在问题:

    理论上可能存在最多10S的误差。如终端1点击开始后,终端2在10:00获取到状态为开始并开始计时;若在终端2下次调用接口之前,如10:01时终端1点击结束,终端1显示的最终持续时间为10:01;而终端2在10:10S时通过接口获知状态已经结束,终端2停止计时,显示的最终持续时间为10:10,和终端1不一致;

    方案2:websocket实时消息推送

    理论上来说,如果终端1点了停止,终端2实时获取到状态,再停止其计时,但存在网络问题,中间也可能有1~2S误差。
    

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)

    你期待的结果是什么?实际看到的错误信息又是什么?

    两个终端有没有什么办法让一个终端点击停止后,另一个终端能够立即获知,并结束自己的计时,最终两个终端显示的持续时间保持一致?
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 前端多终端计时的同步可以通过JavaScript实现,以下是一个简单的示例:

      ```javascript // 获取当前时间 var now = new Date();

      // 设置定时器,每隔一段时间执行一次函数 setInterval(function() { // 获取终端的ID var terminalId = 'your-terminal-id';

      // 在这里获取终端的当前状态,例如是否存在 var status = getTerminalStatus(terminalId);

      // 如果存在,则更新计时器的时间 if (status) { var timerId = setInterval(function() { // 检查终端的状态,是否正在计时 if (status === '正在计时') { // 计时器的开始时间 var startTime = now;

          // 计时器的结束时间
          var endTime = startTime + 1000; // 1秒
      
          // 更新计时器的时间
          setInterval(function() {
            // 检查终端的状态,是否已经结束计时
            if (status === '结束计时') {
              clearInterval(timerId);
            }
          }, 1000); // 1秒
        }
      }, 1000); // 1秒
      

      } }, 1000); // 每1秒执行一次函数 ```

      在这个示例中,我们首先获取当前的时间,然后设置一个定时器,每隔1秒执行一次函数。在函数中,我们首先获取终端的ID,然后获取终端的当前状态。如果存在,我们就更新计时器的时间,并检查终端的状态,是否正在计时。如果是,我们就更新计时器的时间,以1秒为单位。如果终端的状态是结束计时,我们就清除定时器。

      注意:这个示例假设你有一个名为getTerminalStatus的函数,该函数用于获取终端的状态。你需要根据你的实际情况来编写这个函数。

    • 灵魂枷锁 普通会员 2楼

      前端多终端计时的同步可以通过JavaScript实现,以下是一个简单的示例:

      ```javascript // 获取当前时间 var now = new Date();

      // 设置定时器,每隔一段时间执行一次函数 setInterval(function() { // 获取终端的ID var terminalId = 'your-terminal-id';

      // 在这里获取终端的当前状态,例如是否存在 var status = getTerminalStatus(terminalId);

      // 如果存在,则更新计时器的时间 if (status) { var timerId = setInterval(function() { // 检查终端的状态,是否正在计时 if (status === '正在计时') { // 计时器的开始时间 var startTime = now;

          // 计时器的结束时间
          var endTime = startTime + 1000; // 1秒
      
          // 更新计时器的时间
          setInterval(function() {
            // 检查终端的状态,是否已经结束计时
            if (status === '结束计时') {
              clearInterval(timerId);
            }
          }, 1000); // 1秒
        }
      }, 1000); // 1秒
      

      } }, 1000); // 每1秒执行一次函数 ```

      在这个示例中,我们首先获取当前的时间,然后设置一个定时器,每隔1秒执行一次函数。在函数中,我们首先获取终端的ID,然后获取终端的当前状态。如果存在,我们就更新计时器的时间,并检查终端的状态,是否正在计时。如果是,我们就更新计时器的时间,以1秒为单位。如果终端的状态是结束计时,我们就清除定时器。

      注意:这个示例假设你有一个名为getTerminalStatus的函数,该函数用于获取终端的状态。你需要根据你的实际情况来编写这个函数。

    更多回答
    扫一扫访问手机版