防抖动与节流

背景

• 开发环境：react
• 需求：为了解决加载框与空icon出现时机不对劲的bug。
• 该bug具体情况：
  • 请求接口到拿到接口数据耗时1分钟，包括参数为空的时候也是1分钟。而空参数时接口会返回空数据，这没有请求的必要。所以在空参数时，不改发生请求接口的行为，直接退出函数。而退出函数之后，如果数据为空，会显示空icon表示没数据。而不知道为什么数据改变，会导致这个函数发生数次，所以会出现，载入框->空icon一瞬间->载入框，的情况。

解决

防抖动

既然该函数会发生数次，但期望是一次，那就干脆只让他发生一次。他触发1次的时候，如果前面的没有结束，就禁掉前面的。

const { forClearTimeout } = useRef();
const aFuction = ( paramsList ) => {
    openLoading();
    // Anti-shake
    if( forClearTimeout.current ){
        clearTimeout( forClearTimeout.current );
    }
    forClearTimeout.current = setTimeout(()=>{
        if( paramsList.length === 0 ){
            closeLoading();
            return;
        }
        makeRequire( paramsList )
            .then( (data) => {
                doSomethingOn(data);
                closeLoading();
            })
            .catch( () => {
                closeLoading();
            });
    });
}

复制代码

我这里从渲染到有数据，会触发2次这个函数。一次初始化空参数而关loading再return，一次数据返回到了而关loading。
我在这里设置了异步，没有写时间参数。这使得判空出空icon的代码也进了异步队列。这函数会触发2次，而同步执行时，把异步动作都塞到了异步队列，那么当执行判断空参的动作时，表示此时已开始异步队列里的动作，而此时setTimeout的间隔为0，则第一次初始化判空关loading到第二次开始请求数据而开loading的时间间隔是0。也许是react虚拟dom diff算法之类的缘故，这使得这个bug就看不见了。

节流

我这个函数的触发是由按钮来决定的。如果我点击100次这个按钮，则会向服务器传送100次请求。由每次请求1分钟可见，这都是耗时的请求。所以这么做我觉得会加重服务器负担。所以节流。

import { CancelToken } from 'axios';

const forFetchCancel = useRef();
const makeRequest = (paramsList) => {
    // Throttling
    forFetchCancel.current?.();
    somePost(
        url,
        paramsList, 
        ... , 
        { 
            cancelToken: 
                new CancelToken((e)=>{
                    forFetchCancel.current = e; //好像是这么写的
                }) 
        }
    );
}
复制代码

而这么写会使得前面 调用makeRequest 那一部分的代码，在调接口的时候走向catch。
所以要在调用makeRequest()的catch部分加相关处理。

makeRequire( paramsList )
    .then( (data) => {
        doSomethingOn(data);
        closeLoading();
    })
    .catch( (event) => {
        // 不记得 判断该错误事件是否由cancelToken引起 的判断条件怎么写了
        ir(是因cancelToken而进来的)return;
        closeLoading();
});
复制代码