Promise 封装触控手势识别的核心是将 touchstart/touchmove/touchend 等事件监听与计算逻辑封装为返回 Promise 的函数，在满足条件（如滑动超阈值）时 resolve，超时或取消时 reject，并及时清理事件监听器防止内存泄漏。
用 Promise 包装触控手势识别的异步计算结果，核心是把手势识别过程（比如监听 touchstart/touchmove/touchend、计算位移/速度/方向等）封装成一个返回 Promise 的函数，让调用方能用 .then() 或 async/await 处理识别完成后的结果。
封装手势识别逻辑为 Promise 函数
手势识别本身不是原生异步 API，需手动控制 Promise 的 resolve/reject 时机。常见做法是：监听触摸事件，收集数据，满足条件（如滑动距离超阈值、松手）后 resolve；若超时或中途取消（如 touchcancel），则 reject。
- 用
addEventListener注册事件监听器，注意在 resolve/reject 后及时清理，避免内存泄漏 - 使用闭包保存初始触点、时间戳、移动累积量等状态
- 设置合理超时（如 1.5 秒无操作自动 reject），防止 Promise 永远 pending
识别单次滑动手势的 Promise 示例
以下是一个识别「水平滑动」并返回方向（'left' 或 'right'）的 Promise 封装：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
function detectSwipe(element, options = {}) {
const { threshold = 30, timeout = 1500 } = options;
return new Promise((resolve, reject) => {
let startX, startTime;
let isListening = true;
<pre class="brush:php;toolbar:false;">const onTouchStart = (e) => {
if (!isListening) return;
startX = e.touches[0].clientX;
startTime = Date.now();
element.addEventListener('touchmove', onTouchMove, { passive: false });
element.addEventListener('touchend', onTouchEnd);
element.addEventListener('touchcancel', onTouchCancel);
};
const onTouchMove = (e) => {
e.preventDefault(); // 防止默认滚动干扰
};
const onTouchEnd = (e) => {
const endX = e.changedTouches[0].clientX;
const distance = endX - startX;
const duration = Date.now() - startTime;
cleanup();
if (Math.abs(distance) >= threshold && duration < 1000) {
resolve(distance > 0 ? 'right' : 'left');
} else {
reject(new Error('Swipe too short or too slow'));
}
};
const onTouchCancel = () => {
cleanup();
reject(new Error('Touch canceled'));
};
const cleanup = () => {
isListening = false;
element.removeEventListener('touchmove', onTouchMove);
element.removeEventListener('touchend', onTouchEnd);
element.removeEventListener('touchcancel', onTouchCancel);
};
// 超时保护
const timer = setTimeout(() => {
cleanup();
reject(new Error('Swipe timeout'));
}, timeout);
// 清理 timer
const originalCleanup = cleanup;
cleanup = () => {
clearTimeout(timer);
originalCleanup();
};
element.addEventListener('touchstart', onTouchStart, { passive: false });}); }
配合 async/await 使用更直观
封装好后，可直接 await 手势结果，逻辑清晰且易组合：
立即学习“Java免费学习笔记（深入）”；
const box = document.getElementById('my-box');
<p>async function handleUserGesture() {
try {
const direction = await detectSwipe(box, { threshold: 40 });
console.log(<code>Swiped ${direction}</code>);
// 根据方向执行动画、翻页、切换内容等
} catch (err) {
console.warn('No valid swipe:', err.message);
}
}</p><p>// 可重复调用（每次都是新 Promise）
box.addEventListener('click', handleUserGesture); // 或绑定到其他触发点
扩展支持多手势或组合识别
若需识别长按、双指缩放、捏合等，可将 Promise 封装升级为工厂函数，返回不同策略的手势 Promise：
- 用
Promise.race()并行等待多个手势识别 Promise（如同时监听 swipe 和 longpress） - 在 resolve 值中包含手势类型、坐标、速度等元数据，便于后续处理
- 对复杂手势（如画圈、Z 字形），可在
touchmove中持续采样并用算法判断，仍保持只 resolve 一次
