javascript - 快速点击会产生太多请求

Question

我正在使用 React 和 pokeAPI 做一个小型的娱乐项目(pokedex)。

在应用程序中，用户可以单击口袋妖怪，应用程序将获取该口袋妖怪并在模式框中显示附加信息。

问题是这样的:在模态框中，我制作了左右箭头来更改上一个和下一个口袋妖怪，如果用户快速单击其中一个箭头，则每次都会调用 api当点击停止时，用户必须等待之前的所有 promise 都得到解决。

我不想在加载时禁用该方法或按钮，因为它应该可以运行神奇宝贝。如果做出新的 promise ，我基本上只是想拒绝以前的 promise 。这可能吗？

这是获取神奇宝贝的方法:

showDetails(pokemon){
//check if the pokemon is already is state
const statePokemon = this.state.pokemon.find(p => {
   return p.name === pokemon;
});
if(!statePokemon) {
  //set loading and pass the pokemon as a string
  //to show which pokemon is being fetched
  this.setState({
    pokemonLoading : true,
    pokemonFetched : false,
    showing : pokemon,
  });
  let pokemonArr = [...this.state.pokemon];
  let newPokemon = {};
  fetch(`http://pokeapi.co/api/v2/pokemon/${pokemon}`)
  .then(response => response.json())
  .then(response => {
    pokemonArr.push(response);
    newPokemon = response;
  })
  .then((_) => {
    //don't update state with new pokemon
    //if user has closed modal while loading
    if (this.state.showing) {
      this.setState({
        pokemon : pokemonArr,
        pokemonLoading : false,
        pokemonFetched : true,
        showing : newPokemon,
      });
    }
  });
} else {
  //set showing with pokemon from state
  //without making a new fetch
  this.setState({
    showing : statePokemon,
    pokemonFetched : true,
  });
}

}

该项目的存储库是 here

希望大家帮忙!

Answer 1

您可以使用去抖动功能。这将允许该函数在给定的时间内仅运行一定次数。

function debounce(fn, wait) {
  let timeout;
  return (...args) => {
    const waitFn = () => {
      timeout = clearTimeout(timeout);
      fn(...args);
    };
    if (!timeout) {
      timeout = setTimeout(waitFn, wait);
    }
  };
}

// this will run the showDetails function only once every 500ms
this.showDetails = debounce(this.showDetails.bind(this), 500);