Taro input输入框之------防抖(性能优化)

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

下载

$ npm install debounce

引入

import { debounce } from "debounce";

使用

 { }}
   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])
     }
 }

你可能感兴趣的:(Taro input输入框之------防抖(性能优化))