Taro input输入框之------防抖（性能优化）

最新推荐文章于 2023-11-22 16:50:35 发布

原创最新推荐文章于 2023-11-22 16:50:35 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Taro 同时被 2 个专栏收录

2 篇文章

订阅专栏

2 篇文章

订阅专栏

本文探讨了在Taro的onInput事件中使用setState导致输入卡顿的问题，并提出了解决方案——应用防抖(debounce)技术。通过引入或自定义防抖函数，限制setState的执行频率，从而提高输入性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Taro的在的onInput方法中如果使用setState来保存value，会导致输入卡顿，原因是用户在输入时，一直在setState
我的解决方案是使用debounce（防抖），事件和函数执行之间加了一个控制层，来控制函数的执行次数。
第一种方法是下载debounce插件

下载

$ npm install debounce

引入

import { debounce } from "debounce";

使用

<Input
   className="tc-form-item-text"
   type="text"
   placeholder="请输入发票抬头"
   onConfirm={() => { }}
   value={title}
   onInput={debounce(e => { this.setState({ title: e.detail.value }) }, 1000)}
   }}
   maxLength={120}
/>

或者自己定义一个函数，要求简单的可以使用

 const debounce = (func, wait,immediate) => {
     let timeout
     return function (...args) {
         clearTimeout(timeout)
         timeout = setTimeout(() => {
             timeout = null
             if (!immediate) func.apply(this, args)
         }, wait)
         if (immediate && !timeout) func.apply(this, [...args])
     }
 }