时间戳

首页 > 解决方案 > 长按按钮重复烧瓶功能

javascript - 长按按钮重复烧瓶功能

问题描述

今天我一直在尝试解决这个问题，但我无法弄清楚如何“修复”。

我正在使用 Flask 创建一个网站，当我单击放置在帖子表单中的按钮时，我想保持一个动作；更准确地说，当我点击按钮时，应该执行一个动作，但如果我一直按下按钮，我希望这个动作执行更多次。这是我的布局和代码的结构。

这是python代码

from flask import (
    Blueprint, render_template, request
)

from webapp.Utilities.utilities import SerialHandler
from webapp.blueprints.decorators import login_required

bp = Blueprint('main', __name__)

serial_scheduler = SerialHandler()


@bp.route('/', methods=('GET', 'POST'))
@login_required
def index():
    if request.method == 'POST':
        button = request.form['press_to_run']
        foo()
    return render_template('index.html', title="Index")

这里是 HTML 结构

{% extends "layout.html" %}
{% block stylesheet %}
  <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
{% endblock %}
{% block content %}

  <div class="container new_container">
    <div class="card" style="width: 18rem;">
      <div class="card-header">
        Featured
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
      </ul>
    </div>
  </div>

  <div class="container">
    <img src="{{ url_for('video.video') }}" alt="">
  </div>

  <form class="" method="post">
    <div class="btn-group" style="width:100%">
      <button style="width:33.3%">Apple</button>
      <button style="width:33.3%">Samsung</button>
      <button style="width:33.3%">Sony</button>
    </div>
  </form>

  <div class="container new_container">
    <div class="col-md-12 text-center">
      <button onclick="switch_theme()" class="btn btn-light shadow-none" id="switch_button" style="width: 15%;">Dark Mode</button>
    </div>
  </div>

  <script>
    function switch_theme() {
      const theme = document.getElementById('switch_theme').className;

      if(theme === "dark-theme") {
        document.getElementById('switch_theme').className = "light-theme";
        document.getElementById('switch_button').className = "btn btn-dark shadow-none";
        document.getElementById('switch_button').innerHTML = "Light Mode";
      } else {
        document.getElementById('switch_theme').className = "dark-theme";
        document.getElementById('switch_button').className = "btn btn-light shadow-none";
        document.getElementById('switch_button').innerHTML = "Dark Mode";
      }
    }
  </script>

{% endblock %}

最后，我说我不一定需要使用 python 的解决方案，但我也可以使用包含可能运行我的 SerialHandler 对象的 python 函数的 javascript 函数的解决方案。

提前感谢您的答案。

标签： javascriptpythonhtmlflaskjinja2

解决方案

您提供的代码没有多大帮助。据我了解，如果有人一直按下表单元素内的按钮，您想重复调用您的烧瓶 API 端点（将调用 python 函数）。这可以在前端使用 JavaScript 本身完成。就像是 -

<form method="POST">
  <button id="formbutton">Click me!</button>
</form>

<script>
  // grab the button
  formBtn = document.querySelector('#formbutton')
  let isMouseDown = false

  // don't send the form automatically
  formBtn.addEventListener('click', function(e) {
    e.preventDefault()
  })

  // keep track of isMouseDown
  formBtn.addEventListener('mousedown', function(e) {
    isMouseDown = true
  })

  formBtn.addEventListener('mouseup', function(e) {
    isMouseDown = false
  })

  // how many times to call the backend
  setInterval(function() {
    if(isMouseDown) {
      // can also use axios & pass custom data
      fetch('http://your.server/end/point', {
        method: 'POST'
      }).then(res => console.log(resres))
    }
  }, 200)

</script>

这可能不是最好的方法，但可以完成工作。如果有多个按钮，只需将它们添加到数组中并在循环中添加事件侦听器。

推荐阅读