如何在使用fetch-API的Web应用程序上的用户交互过程中将鼠标坐标连续发送到Flask？

Question

我正在尝试在用户在网页上移动光标时发送其鼠标位置。因此，以下代码出于某种原因不会将鼠标数据连续发送到flask，而是等到会话结束后再将所有数据发送到用户单击“取消/保存”按钮之后。这些按钮上没有听众。所以我不明白为什么代码要等到最后才发送数据。我在这里想念什么？

所以这就是我的app.py的样子：

import json

from flask import Flask, url_for, render_template, request, redirect, make_response, jsonify

app = Flask(__name__,static_folder='static',
            template_folder='templates')


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

@app.route('/test', methods=['GET','POST'])
def test():
    req=request.get_json()
    print (req)
    print()
    return render_template("Index.html")

@app.route('/danke')
def danke():
    return render_template("Thankyou.html")

if __name__ == '__main__':
    app.run()

这是我的.js文件中的mouselistener，包括提取API代码：

function showMovementCoords(event) {

     cdata = event.clientX.toString() + "_" + event.clientY.toString()
    fetch(`${window.origin}/test`, {
            method: "POST",
            credentials: "include",
            body: JSON.stringify(cdata),
            cache: "no-cache",
            headers:  new Headers({
                "content-type": "application/json"
            })
        })
}

这里是我的保存/取消按钮，以防万一：

<div class="actions"> <a class="btn btn-default btn-cancel" href="{{ url_for( 'Thankyou' ) }}" id ="cancel"><i class="fa fa-arrow-left"></i> Cancel</a>
                       <a class="btn btn-default btn-save"   href="{{ url_for( 'Thankyou' ) }}" id ="save"><i class="fa fa-check"></i> Save</a>
</div>

我要实现的目标的简短回顾：用户打开页面，进行操作，每当她移动光标时，新的鼠标坐标就会发送到flask，并且我希望flask可以打印出来。用户单击保存/取消。 “谢谢”页面打开。

Answer 1

设置鼠标的Windows事件监听器使用诸如SetInterval之类的计时器进行类似操作，然后检查相同位置，这样就不会发送两次]