javascript - 使用 ontouchmove 只触发一次

标签 javascript reactjs

我正在尝试创建一些功能以允许用户滑动表格行以检查我数据库中的所述人员,我在使用滑动库时遇到了问题,因为我的导入出于某种未知原因被我的项目拒绝了.我决定尝试使用内置的 ontouchmove 函数做一些事情,但是每当我使用 ontouchmove 时,我的函数 checkedIn() 都会被反复触发, 有什么方法可以混合不同的 ontouchmove, ontouchend 等函数每次滑动只执行一次?

这里是我目前的一些实现代码:

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>

最佳答案

一个可能的解决方法是简单地对正在调用的函数进行去抖动,您可以创建自己的去抖动函数或使用库中的函数,例如 lodash .

关于javascript - 使用 ontouchmove 只触发一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53005252/

相关文章:

javascript - 如何在 jQuery 中将图像添加为圆 Angular 的背景?

javascript - jQuery 添加和删除类

javascript - 将 .js 文件添加到 JSP 页面

javascript - React Native CameraRoll.getPhotos API 不呈现结果

javascript - JHipster 7.1.0 ReactJS 构建 jar

javascript - react 路由器与嵌套的 child ?

reactjs - React Lazy 不适用于生产构建

reactjs - 使用webpack和react-router进行延迟加载和代码分割不加载

php - onbeforeunload 似乎并不总是被触发

JavaScript FileReader 正在复制 onload 回调