Javascript 在Python应用程序上执行多个AJAX请求时出现Chrome浏览器错误

我目前正在使用命令“python3-m flask run-h localhost-p8081”在localhost:8081上运行flask服务器。用户可以点击按钮触发事件；此外，数据更新被动态推送到从javascript间隔触发的绘图图形

当两个异步AJAX请求同时运行时，google Chrome上会出现问题-->

页面上有处理其他操作的控件（如开始按钮）。在运行mozilla firefox时，这两个请求都将顺利执行。然而，当使用google Chrome时，按钮点击请求将在几秒钟后开始挂起，需要更长的时间才能到达“req.done”功能，直到最终导致页面崩溃。在下面的代码中，我编写了一些控制台日志，这些日志在浏览器控制台中显示，按钮单击事件在运行几秒钟后停止使用python路由中的“randomstring”进行响应。这似乎是chrome特有的问题，因为这在firefox上一直有效

请提供建议-如何更改此选项以在两种浏览器之间可靠地工作

代码

以下是javascript jquery AJAX请求：

var numerical_count_rate = document.getElementById("totalCounts");
var numerical_error_rate = document.getElementById("errorRate");
var start_btn = document.getElementById("startButtonClick");

var start_btn_clicked = function (){
    console.log("button clicked...")
    req = $.ajax({
        url : "/_start_button_clicked",
        type : "POST",
    });
    console.log("button got this far...")
    req.done(function(data){
        console.log("button got even further !!")
        var data_test = JSON.parse(data)
        var update = data_test.random_string
        console.log(update)
    });
};

var updateInterval = setInterval(update_values, 1000);
    var counts = 0;
    console.log("update_interval fired..")
    function update_values(){
        req = $.ajax({
            url : "/_extend_plot",
            type : "POST",
        });
        req.done(function(data){
            var updates = JSON.parse(data);
            var count_rate_update = {x: [[updates.x_count_rate]],y: [[updates.y_count_rate]]};
            var error_rate_update = {x: [[updates.x_error_rate]],y: [[updates.y_error_rate]]};
            Plotly.extendTraces('plotly_countrate',count_rate_update, [0], 50);
            Plotly.extendTraces('plotly_errorrate',error_rate_update, [0], 50);
            numerical_count_rate.innerHTML = "Total Count Rate: " + updates.y_count_rate.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
            numerical_error_rate.innerHTML = "Error Rate: " + parseFloat(updates.y_error_rate).toFixed(3).toString() + "%";
        });
        window.onresize = function() {
            Plotly.Plots.resize( 'plotly_countrate' );
            Plotly.Plots.resize( 'plotly_errorrate' )
            };
        counts++;
        console.log(counts)
    }

from flask import Flask, render_template,  request
import queue
import threading
import plotly
import json
import pandas as pd
import numpy as np
import random
import datetime


app = Flask(__name__)


@app.route("/", methods=['GET'])
def index():
    initial_graphs_json = create_plots()
    return render_template("index.html", count_rate_plot=initial_graphs_json[0], error_rate_plot=initial_graphs_json[1])


@app.route("/_extend_plot", methods=['GET', 'POST'])
def push_update():
    timestamp = get_datetime()

    updated_data = queue_q.get()
    with queue_q.mutex:
        queue_q.queue.clear()
    client_post_updates = dict(
        x_count_rate=timestamp,
        x_error_rate=timestamp,
        y_count_rate=updated_data["val0"] + updated_data["val1"],
        y_error_rate=updated_data["val2"])

    updatesJSON = json.dumps(client_post_updates, cls=plotly.utils.PlotlyJSONEncoder)
    return updatesJSON


@app.route("/_start_button_clicked", methods=['GET', 'POST'])
def startstop_clicked():
    update_dict = dict(
        random_string="randomstring"
    )
    print("Python click method triggered...")
    update = json.dumps(update_dict)
    return update


if __name__ == "__main__":
    app.run(host="0.0.0.0", port="8081", debug=True)

以下是来自主线程-->ajax请求在主app.py文件中引用的Flask路由的片段：

var numerical_count_rate = document.getElementById("totalCounts");
var numerical_error_rate = document.getElementById("errorRate");
var start_btn = document.getElementById("startButtonClick");

var start_btn_clicked = function (){
    console.log("button clicked...")
    req = $.ajax({
        url : "/_start_button_clicked",
        type : "POST",
    });
    console.log("button got this far...")
    req.done(function(data){
        console.log("button got even further !!")
        var data_test = JSON.parse(data)
        var update = data_test.random_string
        console.log(update)
    });
};

var updateInterval = setInterval(update_values, 1000);
    var counts = 0;
    console.log("update_interval fired..")
    function update_values(){
        req = $.ajax({
            url : "/_extend_plot",
            type : "POST",
        });
        req.done(function(data){
            var updates = JSON.parse(data);
            var count_rate_update = {x: [[updates.x_count_rate]],y: [[updates.y_count_rate]]};
            var error_rate_update = {x: [[updates.x_error_rate]],y: [[updates.y_error_rate]]};
            Plotly.extendTraces('plotly_countrate',count_rate_update, [0], 50);
            Plotly.extendTraces('plotly_errorrate',error_rate_update, [0], 50);
            numerical_count_rate.innerHTML = "Total Count Rate: " + updates.y_count_rate.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
            numerical_error_rate.innerHTML = "Error Rate: " + parseFloat(updates.y_error_rate).toFixed(3).toString() + "%";
        });
        window.onresize = function() {
            Plotly.Plots.resize( 'plotly_countrate' );
            Plotly.Plots.resize( 'plotly_errorrate' )
            };
        counts++;
        console.log(counts)
    }

from flask import Flask, render_template,  request
import queue
import threading
import plotly
import json
import pandas as pd
import numpy as np
import random
import datetime


app = Flask(__name__)


@app.route("/", methods=['GET'])
def index():
    initial_graphs_json = create_plots()
    return render_template("index.html", count_rate_plot=initial_graphs_json[0], error_rate_plot=initial_graphs_json[1])


@app.route("/_extend_plot", methods=['GET', 'POST'])
def push_update():
    timestamp = get_datetime()

    updated_data = queue_q.get()
    with queue_q.mutex:
        queue_q.queue.clear()
    client_post_updates = dict(
        x_count_rate=timestamp,
        x_error_rate=timestamp,
        y_count_rate=updated_data["val0"] + updated_data["val1"],
        y_error_rate=updated_data["val2"])

    updatesJSON = json.dumps(client_post_updates, cls=plotly.utils.PlotlyJSONEncoder)
    return updatesJSON


@app.route("/_start_button_clicked", methods=['GET', 'POST'])
def startstop_clicked():
    update_dict = dict(
        random_string="randomstring"
    )
    print("Python click method triggered...")
    update = json.dumps(update_dict)
    return update


if __name__ == "__main__":
    app.run(host="0.0.0.0", port="8081", debug=True)

正在运行-python版本3.7，jquery版本3.5.1更新：已解决

通过将函数转换为异步调用并将短轮询改为长轮询，问题得以解决。chrome似乎内置了将请求保持在“挂起状态”的功能，而较短的轮询间隔使浏览器队列充满了新的请求，这导致了暂停。目前还不完全清楚为什么firefox上不会出现这种情况，但是在服务器端的线程之间，在互斥和公共内存控制下，基于单个计时器的长时间轮询是更好的总体实践。这样，推送更新的频率仅由可用数据控制，而不是由计时器轮询

新JS代码：