input 框中debounce_react native实现防抖，TextInput输入实现防抖处理

react natvei 实现防抖 (debounce)

防抖处理是经常会用到的功能，比如处理滚动事件做一些复杂计算，这样就会频繁调用回调函数很容易会造成页面的卡顿，这种情况下，我们更希望把多次计算合并成一次，只操作一个精确点，我们普遍把这种方式称为debounce(防抖)和throttle(节流)。

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于设定时间，那么防抖的情况下只会执行一次。

把防抖封装成一个插件，每次使用只需要调用即可。

// debounce.js 防抖封装

let timeout = null

const debounce = (cb, wait = 500) => {

if (timeout !== null) clearTimeout(timeout)

timeout = setTimeout(() => {

timeout = null

cb && cb()

}, wait);

}

module.exports = debounce;

复制代码

我们可以放在App.js全局调用，省掉每次都需要import导入

// App.js

// 在app.js引入文件

import debounce from './src/utils/debounce';

// 定义一个全局变量debounce

global.debounce = debounce // 防抖 默认1000毫秒 使用方法 debounce(() => this.handle())

复制代码

我们也可以在文件中单独引用,直接在页面头部引用

// home.js

import debounce from './src/utils/debounce'; // 引入

复制代码

使用方法

注意：当前的debounce已经在App.js定义成全局变量，如果未定义需要单独引用

import React, { Component } from 'react'

import {

Text,

View,

TextInput

} from 'react-native'

// 防抖测试

export default class Home extends Component {

constructor(props) {

super(props);

this.state = {

text: '',

changeText: ''

}

}

// 数据处理

requstData = () => {

this.setState({

changeText: this.state.text

})

}

inputValue = (text) => {

this.setState({

text: text

})

// 使用防抖

debounce(() => this.requstData(), 500)

}

render() {

return (

防抖

style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}

onChangeText={(text) => this.inputValue(text)}

value={this.state.text}

/>

防抖效果:{this.state.changeText}

);

}

}

复制代码

效果