首页 > 解决方案 > 如何防止连续两次调用快速路线?

问题描述

我有一个按钮,可以调用在我的网站上发布信息的路线。

问题是当用户电话延迟时,他们在被重定向到主页之前按了两次按钮,然后创建了 2 或 3 个帖子。

我怎么能解决这个问题?

  handleSubmit(event) {
    event.preventDefault();
    axios.post("/publishJob", this.state).then(resp => {
      if (resp.data.success) {
        this.setState({
          jobData: ""
        });
        this.props.history.push("/");
      }
    });
  }
app.post("/publishJob", (req, res) => {
    return database
        .publishJob(
            req.user.id,
            req.body.jobData.data.restname,
            req.body.jobData.data.jobtype,
            req.body.jobData.data.hourpay,
            req.body.jobData.data.typepay,
            req.body.jobData.data.schedule,
            req.body.jobData.data.contact,
            req.body.jobData.data.address,
            req.body.jobData.data.area,
            req.body.jobData.data.phone,
            req.body.jobData.data.extrainfo,
            req.body.jobData.data.urgent,
            req.session.userId
        )
        .then(() => {
            res.json({
                success: true
            });
        });
});

标签: node.jsreactjsexpress

解决方案


您可以实现一个 Throttle 函数。此函数只允许在特定时间范围内调用一次,例如,一个函数只能每 2 秒调用一次。

您可以在此处找到有关此的更多信息:https ://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

油门功能是这样的:

const throttle = (func, limit) => {
  let inThrottle
  return function() {
    const args = arguments
    const context = this
    if (!inThrottle) {
      func.apply(context, args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

你可以像这样使用它:

throttleBtn.addEventListener('click', throttle(function() {
  return console.log('Hey! It is', new Date().toUTCString());
}, 1000));

推荐阅读