uni-app中同一个按钮连续点击，第二次响应很慢？

问题描述

<view v-for="(item, index) in areaData" @tap="chooseLeft" :data-index="index" :class="'price-left ' + (item.is_choose ? 'active' : '')">
<view>{{ item.name }}</view>
<image :src="'/static/icon/icon_choose' + (item.is_choose ? '-on' : '') + '.png'" class="choose"></image>
</view>

如果是不同的选项点击，没问题。

我现在连续点击同一个按钮，比如“东城区”，就第一次快，以后image变化要等好几秒？

不知道大家遇到没有？

ionicwang 1楼•2 天前

在uni-app中，如果遇到同一个按钮连续点击时第二次响应很慢的问题，这通常是由于按钮点击事件的处理逻辑中存在耗时操作，或者点击事件被多次触发而未能及时取消之前的请求。为了解决这个问题，可以采取防抖（Debounce）或节流（Throttle）策略，以及确保在请求未完成前不再发起新的请求。

以下是一个结合防抖策略和请求控制的代码示例：

<template>
  <view>
    <button @click="handleClick">点击我</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 标记请求是否正在进行
      requestPending: false,
      // 防抖定时器
      debounceTimer: null,
    };
  },
  methods: {
    // 防抖函数
    debounce(func, wait) {
      let timeout;
      return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
      };
    },
    // 按钮点击事件处理函数
    handleClick: function() {
      if (this.requestPending) {
        console.log('请求正在进行中，请稍候...');
        return;
      }
      this.requestPending = true;
      
      // 使用防抖函数包装实际处理逻辑
      const debouncedHandle = this.debounce(this.actualHandle, 2000); // 2000ms为防抖时间
      debouncedHandle.call(this);
    },
    // 实际处理逻辑
    actualHandle: async function() {
      try {
        // 模拟耗时请求
        await new Promise(resolve => setTimeout(resolve, 3000));
        console.log('请求完成');
      } finally {
        this.requestPending = false;
      }
    },
  },
};
</script>

<style>
/* 样式可根据需求调整 */
</style>

在这个示例中，我们定义了一个debounce函数来防止按钮在短时间内被多次点击。当按钮被点击时，会先检查是否已有请求正在进行（通过requestPending标记），如果有则直接返回，避免重复请求。然后，我们使用防抖函数debouncedHandle来包装实际的请求处理逻辑actualHandle，确保在指定的防抖时间内（例如2000毫秒），即使按钮被多次点击，也只执行一次请求处理逻辑。

通过这种方式，可以有效避免因按钮连续点击而导致的第二次响应很慢的问题。