score:1

Accepted answer

i actually found the solution thanks to @kgssandaruan precious hint ! here it is :

   const [loading, setloading] = usestate(false);
  //onclick
  const onarrowclick =  direction => {
    setloading(true);
    //if user clicked on arrow up button
    if (direction === 'go-up') {
      settimeout(() => setloading(false), 1000);
      //animation to next section
      if (currentindex > 0) {
        setcurrentindex(currentindex - 1);
        jumpto(images[currentindex - 1]);
        setcurrentimage(images[currentindex - 1]);
      } else {
        setcurrentindex(0);
      }
      //if user clicked on arrow down button
    } else if (direction === 'go-down') {
      settimeout(() => setloading(false), 1000);
      //animation to next section
      if (currentindex < 6) {
        setcurrentimage(images[currentindex + 1]);
        jumpto(images[currentindex + 1]);
        setcurrentindex(currentindex + 1);
      } else {
        setcurrentindex(6);
      }
    }
    getdata(currentindex + 1);
  };
....
<button disabled={loading}></button>

score:0

  • change the onarrowclick to accept both $event and direction ex:

    const onarrowclick = (event, direction) => {
    .....
    <button onclick={(e) => onarrowclick(e, 'go-up')}>go-up</button>
    
  • inside onarrowclick use complete callback to enable the button

    const onarrowclick = (event, direction) => {
        event.target.disabled = true; //disable the button
    
        if (direction === 'go-up') {      
            jumpto(images[currentindex - 1], () => {
                // this callback calls when scrolling gets completed
                event.target.disabled = false; // enable the button once the scroll completed.
            });
            setcurrentindex(currentindex - 1);
        }
        ....
    }
    

Related Query

More Query from same tag