@touchStart 触摸事件在uni-app中连续频繁触发当不再触发的时候页面会直接卡死

@touchStart 触摸事件在uni-app中连续频繁触发当不再触发的时候页面会直接卡死

开发环境 版本号 项目创建方式
Windows 22H2 HBuilderX 
### 示例代码：


<view class="game-container" :style="{ backgroundImage: `url(${imageUrl})` }">  
<!-- 游戏区域 -->  
<view class="track-area">  
<!-- 音符轨道 -->  
<view   
v-for="(track, index) in tracks"   
:key="''+index"
:class="[''+index,{ 'active': activeKeys.includes(track.key) }]"
:style="{ left: track.position }"
  >
<view class="judge_line" @touchstart="onKeyTap" :data-index="index">
</view>
  </view>
</view>
<!-- 连击数字显示 -->
<view
  v-show="combo > 0"
  class="combo-number "  
:class="!isCombo ? 'comboMin':'comboMax'"
:style="{
fontSize: 48 + 'rpx',
color: getComboColor(combo)
}"
>
<text style="margin-right: 50rpx;">perfect</text><text>{{combo}}</text>
</view>  
</view>

操作步骤：

使用iphone手机的微信小程序环境 点击累加到700+,中断后 ，再次点击

预期结果：

点击累加到700+,中断后 ，再次点击 ，不会卡住,卡死，保证后续逻辑能正常执行

实际结果：

点击累加到700+,中断后 ，再次点击 ，会卡住，卡死，导致后续逻辑，弹窗弹不出

bug描述：

点击累加到700+,中断后 ，再次点击 就会卡住，点几次都不会再次累加，过几秒恢复正常，ios 比较严重，可能会卡个几分钟


更多关于@touchStart 触摸事件在uni-app中连续频繁触发当不再触发的时候页面会直接卡死的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

你试试写个原生微信小程序有没有这个问题

更多关于@touchStart 触摸事件在uni-app中连续频繁触发当不再触发的时候页面会直接卡死的实战教程也可以访问 https://www.itying.com/category-93-b0.html


原生小程序不会卡住

回复 y***@163.com: 发下你写的原生测试demo和uniapp测试demo

基础库版本改成3.8.5测试也不会卡住

回复 y***@163.com: 基础库是微信控制的，这个可能是微信的问题

回复 DCloud_UNI_JBB: 原生写不会 卡主 ，uniapp编写切换到微信基础库3.8.5也不会卡 。就是 一个 简单 的计数器 ，点击页面数字加1，连续点击到 700左右 ，中断 ，再次点击就会卡主。原生 则不会。原生 测试到1000也不会卡主 ，后面 就没有再测试 。

这个是测试demo https://developers.weixin.qq.com/s/CgKLyLmO803L 附件是uniapp测试demo

在uni-app中，@touchstart事件频繁触发导致页面卡死是典型的性能问题。从代码分析，问题可能出在以下方面：

  1. 事件处理函数执行过重：onKeyTap函数可能包含复杂计算或频繁的DOM操作，在iOS微信小程序环境下容易阻塞渲染线程。

  2. 数据更新频繁：combo数值快速更新导致Vue频繁重渲染，在iOS上容易引发性能瓶颈。

建议优化方案：

  1. 函数节流：使用uni.$emit和防抖机制控制事件触发频率
onKeyTap: _.throttle(function(e){
  // 处理逻辑
}, 50)
回到顶部