Question

我正在尝试使用警报框实施计划的通知。我正在从API响应中获取一个JSON对象，其中包含当天的所有通知。通知PTP和Call back分为两类。第一个通知是准时的，但之后的通知将比其计划时间延迟随机时间。此问题专门在Chrome中发生。 Firefox没有给我这个问题。

需要注意的一点是，一旦用户单击警报框中的“是”，Firefox就会刷新窗口，但Chrome不会这样做。这是什么问题？似乎是性能问题。

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ptp_list: {
        "0": { customer_id: 0, ptp: "15:14:20", callback: "" },
        "1": { customer_id: 1, ptp: "", callback1: "" },
        "2": { customer_id: 2, ptp: "", callback: "" }
      }
    };
    this.updatePTP = this.updatePTP.bind(this);
  }
  componentDidMount() {
    this.updatePTP();
  }

  updatePTP() {
    //initialize time variables
    var currenttime = new Date();
    var i = 0;
    //find current time upto milliseconds

    //get notifications list
    var notificationsList = JSON.parse(JSON.stringify(this.state.ptp_list));

    //store notifications list in localstorage
    window.localStorage.setItem(Constant.PTP_LIST, JSON.stringify(notificationsList));

    //find the number of ptp/callback notifications for the day
    var objectsList = Object.keys(notificationsList).length;

    for (var i = 0; i < objectsList; i++) {
      var ptp_time_list = [];          var callback_time_list = [];
      var ptp_time_list_milli = new Date();
      var callback_time_list_milli = new Date();

      currenttime.setHours(currenttime.getHours(), currenttime.getMinutes(), currenttime.getSeconds(), currenttime.getMilliseconds());

      //check PTP notifications 
      if (notificationsList[i].ptp != "" && notificationsList[i].ptp != null) {

        //remove ':' from time 
        ptp_time_list.push(notificationsList[i].ptp.split(':'));
        //create date object for storing time and to perform operations later while using setTimeout function
        ptp_time_list_milli.setHours(ptp_time_list[0][0], ptp_time_list[0][1], ptp_time_list[0][2], 0);

        if (ptp_time_list_milli >= currenttime) {

          //set timeout for PTP notification alert
          setTimeout(function (i) {
            alert("PTP Reminder!\n\nCustomer ID : " + notificationsList[i].customer_id);

          }, (ptp_time_list_milli - currenttime), i);
        }
      }

      //same process as above
      if (notificationsList[i].callback != "" && notificationsList[i].callback != null) {
        callback_time_list.push(notificationsList[i].callback.split(':'));

        callback_time_list_milli.setHours(callback_time_list[0][0], callback_time_list[0][1], callback_time_list[0][2], 0);

        if (callback_time_list_milli >= currenttime) {

          //set timeout for Call back notification alert
          setTimeout(function (i) {

            alert("Callback Reminder!\n\nCustomer ID : " + notificationsList[i].customer_id);
          }, (callback_time_list_milli - currenttime), i);

        }
      }
    }

  }

Answer 1

根据javascript.info：

在浏览器IE和Firefox中，内部计时器继续“滴答”   在显示警告/确认/提示时，但在Chrome，Opera和Safari中   内部计时器变为“冻结”状态。

因此，如果您运行上面的代码并且不关闭针对   一段时间，然后在Firefox / IE中，下一个警报将立即显示为   您可以执行此操作（从上一次调用开始经过2秒），然后在   Chrome / Opera / Safari –再过2秒钟（计时器在   警报）。

我测试了您的代码并确认了这一点。您使警报消息打开的时间越长，打开第二条警报消息所花费的时间就越长。

Chrome中的警报框性能

1 个答案: