Javascript 如何在使用fetch API进行web应用程序的用户交互期间将鼠标坐标连续发送到flask？

当用户在网页上移动光标时，我试图发送用户的鼠标位置。因此，出于某种原因，下面的代码不会将鼠标数据连续发送到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()

这是my.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能够打印出来。用户单击保存/取消。“谢谢”页面打开。

为鼠标设置Windows事件侦听器

---

类似这样的事情，使用诸如SetInterval之类的计时器，然后检查相同的位置，这样它就不会发送两次了

请注意比较并添加您自己的算法和co