美文网首页
Taro input输入框之------防抖(性能优化)

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

作者: 凉生可可 | 来源:发表于2020-05-09 17:22 被阅读0次

Taro的在<Input>的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])
     }
 }

相关文章

网友评论

      本文标题:Taro input输入框之------防抖(性能优化)

      本文链接:https://www.haomeiwen.com/subject/chxlnhtx.html