Python Flask实现网站长按按钮持续发信号控制PiCar求助

这个问题核心是前端监听按钮长按状态，定时发送控制请求，后端接收请求执行PiCar控制逻辑，分两部分实现：

前端实现（HTML + JavaScript） #

需要监听按钮的mousedown（按下）、mouseup（松开）、mouseleave（鼠标离开按钮）事件，通过定时器在长按期间持续发请求：

<!-- 网页中的控制按钮 -->
<button id="forward-btn">前进</button>

<script>
let controlInterval = null;
const btn = document.getElementById('forward-btn');

// 按下按钮时启动定时请求
btn.addEventListener('mousedown', () => {
  // 每隔100ms发送一次控制请求，可根据需求调整间隔
  controlInterval = setInterval(() => {
    fetch('/api/car/forward', { method: 'POST' })
      .then(res => res.text())
      .catch(err => console.error('请求失败:', err));
  }, 100);
});

// 松开或离开按钮时停止定时请求
function stopControl() {
  if (controlInterval) {
    clearInterval(controlInterval);
    controlInterval = null;
    // 可选：发送停止信号，确保小车及时停下
    fetch('/api/car/stop', { method: 'POST' });
  }
}

btn.addEventListener('mouseup', stopControl);
btn.addEventListener('mouseleave', stopControl);

// 适配移动端触摸事件
btn.addEventListener('touchstart', (e) => {
  e.preventDefault(); // 防止浏览器默认触摸行为
  btn.dispatchEvent(new Event('mousedown'));
});

btn.addEventListener('touchend', stopControl);
btn.addEventListener('touchcancel', stopControl);
</script>

后端Flask实现 #

编写接收控制请求的路由，执行PiCar的控制代码：

from flask import Flask, request

app = Flask(__name__)

# 假设你已经有PiCar的控制函数，比如：
def car_forward():
    # 这里写控制小车前进的硬件代码
    pass

def car_stop():
    # 这里写控制小车停止的硬件代码
    pass

@app.route('/api/car/forward', methods=['POST'])
def handle_forward():
    car_forward()
    return 'OK', 200

@app.route('/api/car/stop', methods=['POST'])
def handle_stop():
    car_stop()
    return 'OK', 200

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

关键注意事项 #

• 定时器间隔不要设置过小（比如小于50ms），避免短时间内发送大量请求导致后端拥堵；
• 必须处理mouseleave事件，防止用户按下按钮后鼠标移开，定时器无法停止；
• 移动端要添加触摸事件支持，确保手机端操作正常；
• 后端控制函数要尽量轻量化，避免阻塞请求，保证响应速度。

内容的提问来源于stack exchange，提问作者workflower