CODEWITHSUNDEEP
javascriptreactjs
JvB
JvB

Reputation: 297

Using ontouchmove to fire only once

I am trying to create some functionality to allow a user to swipe a table row to check said person in inside my database, I have had trouble using on-swipe libraries as my imports for some unknown reason are being refused by my project. I have decided to try an do something with the built in ontouchmove functions however whenever I use ontouchmove my function checkedIn() is fired over and over, is there any way to mix the different ontouchmove, ontouchend etc functions to only execute once per swipe?

Here is some of the code I currently have where it is implemented:

return (
              (session) ?
                <tr // eslint-disable-line jsx-a11y/no-static-element-interactions
                key={booking.id}
                onTouchMove={checkIn(booking.id)}
                >
                  <td>{booking.type}</td>
                  <td>
                    {booking.sessionId ?
                      <span>
                        {(new Date(sessions[booking.sessionId].date)).toLocaleString('en-GB', {
                          day: '2-digit',
                          month: '2-digit',
                          year: 'numeric',
                          timeZone: 'utc',
                        })} {session.name}
                      </span> :
                      <span>No session</span> // eslint-disable-line react/jsx-indent
                    }
                  </td>
                  <td>
                    <div>{booking.consumerName}</div>
                    <div>{booking.consumerEmail}</div>
                    <div>{booking.consumerPhonenumber}</div>
                  </td>

Upvotes: 1

Views: 72

Answers (1)

Ralph Najm
Ralph Najm

Reputation: 239

A possible fix for this is to simply debounce the function that is being called, you can create your own debounce function or use one from a library such as lodash.

Upvotes: 2

Related Questions