如何在使用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文件中的鼠标监听器，包括fetch 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

使用诸如SetInterval之类的计时器为鼠标设置一个事件侦听器，然后检查相同的位置，这样它就不会发送两次