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
anddirection
ex:const onarrowclick = (event, direction) => { ..... <button onclick={(e) => onarrowclick(e, 'go-up')}>go-up</button>
inside
onarrowclick
use complete callback to enable the buttonconst 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); } .... }
Source: stackoverflow.com
Related Query
- Waiting before user reclicks a button
- Material UI Dialog with checkbox acknowledgement before user can press the yes button to delete record
- React component triggering alert before button press along with a POST request before user input
- react-router not waiting for animation before changing route
- FirebaseUI - Validate displayName before user creation
- How to disable a button while waiting for redux to resolve?
- Is it possible for button onClick to fire twice before being disabled since setState is asynchronous?
- close popup react-leaflet after user click on button in popup
- React Native refresh content when user hits back button - using Hooks
- React waiting for map function before deciding render to prevent div flash
- Dilemma about React Hooks and AJAX call triggered by user by clicking on a button
- how to add input field dynamically when user click on button in react.js
- ReactJS: onClick function executes before clicking button
- How to prevent user multiple click submit button error for a login form in react?
- Manually show Loading/Spinner immediately in onClick of button in React (without waiting for setter)
- Material-UI button requires 3 clicks before it will render menu
- Waiting for React component state to update before testing with Jest
- disable form submit button until user checks recaptcha checkbox
- How to stop ongoing uploading file method when user clicks delete button using react?
- Redirect to the same page that user tried to access before login - Reactjs
- React Router - Detect when a user hits the back button which changes the URL's query params
- if user type existing email in the text field, button should be disabled in react js
- How to click automatically in a button when user coming to page
- Waiting until function returns a value before proceeding in ReactJS
- Alert user before leaving page after inputting some data (Specially in ReactJS)
- React Redux - Waiting for async api call to finish before next action is dispatched
- React Application Will "Flash" Default Page Before Redirecting An Authenticated User
- react button is called before onPress when using Hooks
- How would you hide an edit and delete button for something the user doesn't own
- How can I set enabled to a button only If the user types in numbers in the input?
More Query from same tag
- How to map a 2d array in React Js
- Checkbox onchange function is always undefined in React component class
- What is wrong with my render method here?
- react-router-dom isnt working just render "/"
- How to Access Theme Colors Through SX in Material UI
- nextjs ie11 Expected identifier
- Material-ui Autocomplete: Add a value to startAdornment
- Redux: Handling State between Multiple Routes
- React component render dynamic content in tabs from a JSON object
- how to create a function which has a function as one of its arguments react
- How to set placeholder for dropdown in react js?
- Defining variables in defaultProps in Reactjs
- pass data from app.js to components in ReactJs
- How can I render data within nested objects in react?
- import Excel from "exceljs" throwing error on browser TypeError: Cannot read property 'prototype' of undefined
- Dynamically Created Elements in React - How to have control?
- Using React and Redux, how would you clear an input field after a successful redux-thunk completion?
- Add multiple form fields but show only one at a time
- Object.defineProperty called on non-object in my react.js application
- react front-end, node js back-end, monogo db deployment as microservices at kuberenetes minikube
- How do I implement a toggle button with React?
- Actions (playing sound) based on Redux store changes
- ReactJS Add new row to Table
- react call parent component method in child component, this in parrent method is undefined(typescript)
- Using react-i18next within a class component
- MIME type ('text/html') is not executable, and strict MIME type checking is enabled
- Unable to resolve path to module 'react'. (import/no-unresolved)
- Next.js live price updates from GetServerSideProps props
- Use react-router for SSR: client sends a new request to server for every route
- How does react-redux know what store fragment to pass?