HarmonyOS 鸿蒙Next 为什么这个 tabs 在测试中点击切换会很卡？几秒后才能出现，有的时候甚至不出现

[@Component](/user/Component)  
struct TabContentItem {  
  [@Prop](/user/Prop) title: string  
build() {

Column() {

Text(this.title)

.fontSize(16)

.fontWeight(FontWeight.Medium)

}

.width(‘100%’)

.height(‘100%’)

.justifyContent(FlexAlign.Center)

.alignItems(HorizontalAlign.Center)

}

}
@Component

export default struct OptimizedTabs {

@State private currentIndex: number = 0

@State private isChanging: boolean = false

private tabTitles: string[] = [‘发布’, ‘收藏’, ‘喜欢’, ‘打卡地’, ‘历史’, ‘推荐’]

private lastClickTime: number = 0

private CLICK_DEBOUNCE_TIME: number = 300 // 防抖时间 300ms  
@Builder

TabBarBuilder(title: string, index: number) {

Text(title)

.fontSize(14)

.fontWeight(FontWeight.Medium)

.fontColor(index === this.currentIndex ? ‘#FFFFFF’ : ‘#888888’)

.backgroundColor(index === this.currentIndex ? ‘#0175F9’ : ‘#FAFAFA’)

.borderRadius(5)

.width(‘80%’)

.textAlign(TextAlign.Center)

.height(26)

.padding({ left: 10, right: 10 })

.onClick(() => this.safeChangeTab(index))

}
// 安全的Tab切换方法  
private safeChangeTab(index: number) {

const currentTime = new Date().getTime()
<span class="hljs-comment">// 防抖处理  </span>
<span class="hljs-keyword">if</span> (currentTime - <span class="hljs-keyword">this</span>.lastClickTime &lt; <span class="hljs-keyword">this</span>.CLICK_DEBOUNCE_TIME) {  
  <span class="hljs-keyword">return</span>  
}  

<span class="hljs-comment">// 防止重复点击  </span>
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.isChanging || index === <span class="hljs-keyword">this</span>.currentIndex) {  
  <span class="hljs-keyword">return</span>  
}  

<span class="hljs-keyword">this</span>.lastClickTime = currentTime  
<span class="hljs-keyword">this</span>.isChanging = <span class="hljs-literal">true</span>  

<span class="hljs-comment">// 异步更新，避免阻塞  </span>
setTimeout(() =&gt; {  
  <span class="hljs-keyword">this</span>.currentIndex = index  
  <span class="hljs-keyword">this</span>.isChanging = <span class="hljs-literal">false</span>  
}, <span class="hljs-number">50</span>)  
}
build() {

Tabs({

barPosition: BarPosition.Top,

index: this.currentIndex

}) {

ForEach(this.tabTitles, (title: string, index: number) => {

TabContent() {

TabContentItem({ title: title })

}

.tabBar(this.TabBarBuilder(title, index))

}, (title: string) => title)

}

.width(‘100%’)

.margin({ top: 2, bottom: 2 })

.barHeight(35)

.backgroundColor(’#F3F3F3’)

.barBackgroundColor(’#FFFFFF’)

.borderRadius(0)

.animationDuration(200)

.scrollable(true)

.onChange((index: number) => {

if (!this.isChanging) {

this.currentIndex = index

}

})

}

}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>