JavaScript 函数 document.addEventListener 不起作用-解网

问：

我正在创建一个基本的 Flask 应用程序。下面是我的 .py 文件的截图。check_for_event（）目前只是一个虚拟函数，用于切换“标志”以进行测试。当“flag”设置为 True 时，我的“/update”路由正在更改我的结果。

app = Flask(__name__)

flag = False
def check_for_event():
    global flag
    for i in range(10):
        if i % 2 == 0:
            flag = True
            time.sleep(5)
        else:
            flag = False
            time.sleep(2)

@app.route('/update', methods=['GET'])
def update_data():
    global flag
    my_array = []
    if flag:
        flag = False
        my_array.append([str(randrange(1000)), "Place_Holder_1", "Place_Holder_2"])
        # Dispatch the 'resultChange' event along with the updated 'result'
        updated_result = {'type': 'resultChange', 'result': my_array}
    else:
        # If there's no change, send a 'noChange' event
        updated_result = {'type': 'noChange'}
    return jsonify(updated_result)

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == '__main__':
    t = Thread(target = check_for_event)
    t.start()
    app.run()

下面是我的 HTML/JavaScript 的截图。我添加了一个事件侦听器来检测更改，并触发函数调用以执行其他操作。我添加了一些打印语句，但我从未进入事件侦听器。我在这里的总体目标是让 updateAndDisplayResult（）仅在 updated_result 中填充了对 update_data（）中 my_array[] 的更新时执行。

<script type="text/javascript">
  
// Function to update and display the 'result'
function updateAndDisplayResult() {
    // Handle result from main.py
    $.getJSON($SCRIPT_ROOT + '/update', function(data) {      
        if (data.result.length > 0) {
          // Do Something...
        }
    }); // end of getJSON()
}; // end of updateAndDisplayResult

document.addEventListener('DOMContentLoaded', function() {
  // Event listener for custom event 'result_change'
  document.addEventListener('result_change', function(event) {
    var my_event = event.detail;
    console.log("Inside Event Listener");
    
    if (my_event.type === 'resultChange') {
      console.log("Result Changed!");
      updateAndDisplayResult();
    }
  });
});

</script>
<body>
  <h1>Welcome!</h1>
  <div id="result"></div>
</body>

编辑：一位用户指出，我缺少触发此事件的dispatchEvent（）调用。这一定是问题所在，或者至少是我问题的很大一部分。我想我需要添加这样的东西：

var resultChangeEvent = new CustomEvent('result_change'); 
document.dispatchEvent(resultChangeEvent);

我尝试了一些变化，但仍然没有运气。谁能帮忙？

javascript python html flask addeventlistener

JavaScript 函数 document.addEventListener 不起作用

JavaScript function document.addEventListener not working

评论