防止触发多次快速点击 API

Question

对于我的 Instagram 克隆项目，我有一个喜欢和不喜欢的按钮。如果当前登录用户没有喜欢或不喜欢，两者都将显示黑色。如果我喜欢 post ，喜欢会显示蓝色，然后当我点击不喜欢时，它会从喜欢切换到不喜欢，从蓝色切换到红色。并单击激活的 like/dislike 它将不喜欢或不喜欢。出现的问题是，当你点击超快时，它会以某种方式突破并添加多个喜欢，而每个用户应该只能添加一个喜欢或一个不喜欢。

Answer 1

使用 Debouncing 的速率限制示例。如果用户多次快速点击，只有最后一次点击会被注册。您可以根据需要更改延迟时间。

const debounce = (fn, delay) => {
  let t = null;
  return function(...args) {
    clearTimeout(t);
    t = setTimeout(() => {
      fn(...args);
    }, delay);
  }
};

let handleLike = () => {
  console.log("Like Clicked");
};

handleLike = debounce(handleLike, 1000);

const btn = document.querySelector("#like");
btn.addEventListener("click", handleLike);

<button id="like">
  Like
</button>

防止触发多次快速点击 API

Prevent multiple fast clicks from triggering API

javascript

express

sequelize.js

reactjs

redux