빠른 클릭으로 너무 많은 요청이 생성됩니다.

Question

나는 반응과 pokeAPI를 사용하여 작은 재미있는 프로젝트 (pokedex)를하고 있습니다.

응용 프로그램에서 사용자는 포켓몬을 클릭 할 수 있으며 응용 프로그램은 해당 포켓몬을 가져 와서 모달 상자에 추가 정보를 표시합니다.

문제는 다음과 같습니다. 모달 상자에서 화살표 키를 사용하여 사용자가 빠르게 클릭하면 api를 호출 할 때마다 왼쪽 및 오른쪽 화살표를 변경하여 이전 및 다음 pokemons로 변경합니다. 클릭이 중지되면 이전의 모든 약속이 해결 될 때까지 기다려야합니다.

포켓 몬스터를 통과 할 수 있기 때문에로드하는 동안 메서드 또는 버튼을 비활성화하지 않으려합니다. 나는 기본적으로 새로운 약속이 만들어지면 이전 약속을 거부하기를 원합니다. 이것이 가능한가?

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

당신은 debounce 기능을 사용할 수 있습니다. 이렇게하면 주어진 시간 내에 여러 번만 기능을 실행할 수 있습니다. @ realseanp의 대답에

additiona에서

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); 

Answer 2

, 당신은 당신이 디 바운스로 봤어

function throttle(duration, fn) { 
    let inProgress; 
    return() => { 
    if (inProgress) { 
     clearTimeout(inProgress); 
    } 
    inProgress = setTimeout(fn, duration); 
    }; 
} 

window.addEventListener('keydown', throttle(500,() => console.log('keydown')), false);