React-Native 函数去抖和函数节流 lodash.throttle

image.png

提供了两个函数 debounce和throttle
具体的可以看这篇文章

一：debounce去抖：使用场景

例如：一个搜索框，输入1，请求数据得到包含1的数据；再输入2，得到包含12的数据...假如用户想得到1234的数据，就要调用4次接口得到，浪费请求资源，本地数据渲染也会走多次。 debounce可以解决此问题

/*
this.getData 请求方法
500 延迟时间
option 配置

lodash在opitons参数中定义了一些选项，主要是以下三个：
   leading，函数在每个等待时延的开始被调用，默认值为false
   trailing，函数在每个等待时延的结束被调用，默认值是true
   maxwait，最大的等待时间，因为如果debounce的函数调用时间不满足条件，可能永远都无法触发，
            因此增加这个配置，保证大于一段时间后一定能执行一次函数
*/
this.handleClickDebounce = _.debounce(this.getData, 500, { 'maxWait': 1000 });

使用

import * as _ from 'lodash'

export default class App extends Component {
    constructor(props){
        super(props);

        this.state = {
            text: ''
        }

        this.textChange = this.textChange.bind(this);
        this.getData = this.getData.bind(this);        
        this.handleClickDebounce = _.debounce(this.getData, 500, { 'maxWait': 1000 });

    }
    componentWillUnmount() {
        this.handleClickDebounce.cancel();
    }

    textChange(text){
        console.log('text==',text)
        this.setState({
            text
        });
        this.handleClickDebounce()
    }

    getData(){
        console.log('模拟请求接口: 请求数据中...')
    }

    render() {
        return (
            

         
                函数去抖：用与防止输入框频繁搜索
                {this.textChange(text)}}
                />

            


        );
    }
}

QQ20190213-114115.gif

image.png

二：throttle节流：使用场景

例如：一个按钮，点击要调用接口，接口成功跳转到下一个页面。这是频繁的点击，频繁的调用接口，会导致页面跳转多次。throttle可以解决此问题

/*
* this.onPress 需要调用的方法
* 1000 1秒之内不让重复调用
*
*option 配置

lodash在opitons参数中定义了一些选项，主要是以下三个：
   leading，函数在每个等待时延的开始被调用，默认值为false
   trailing，函数在每个等待时延的结束被调用，默认值是true
   maxwait，最大的等待时间，因为如果debounce的函数调用时间不满足条件，可能永远都无法触发
            因此增加这个配置，保证大于一段时间后一定能执行一次函数
*
* */

this.handleClickThrottled = _.throttle(this.onPress, 1000);

使用

import * as _ from 'lodash'

export default class App extends Component {
    constructor(props){
        super(props);

        this.handleClickThrottled = _.throttle(this.onPress, 1000);

    }
    componentWillUnmount() {
        this.handleClickThrottled.cancel();
    }

    onPress() {
        console.log('1秒调用一次该方法')
    }

    render() {
        return (
            

                
                    函数节流：用于防重复点击
                

        );
    }
}

QQ20190213-114710.gif