JavaScript 中怎么使用 Promise 包装触控手势识别的异步计算结果-js教程-PHP中文网

Promise 封装触控手势识别的核心是将 touchstart/touchmove/touchend 等事件监听与计算逻辑封装为返回 Promise 的函数，在满足条件（如滑动超阈值）时 resolve，超时或取消时 reject，并及时清理事件监听器防止内存泄漏。

javascript 中怎么使用 promise 包装触控手势识别的异步计算结果

用 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  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 });

}); }