异步执行顺序

Question

当我反复快速点击“点击我”时，为什么

console.log(`===${innerCount}.2`);

有可能比

console.log(`===${innerCount}.1`);

更早执行

这是 CodeSandBox：https://codesandbox.io/s/loving-blackburn-v4k5y4?file=/src/App.js:651-666

throttle

来自

lodash

.

let count = 0;
const App = () => {
  const throttledFetchData = throttle(async (innerCount) => {
    const result = await callApi();
    console.log(`===${innerCount}.1`);
    return result;
  }, 100);

  const handleClick = throttle(async (e: any) => {
    count++;
    const innerCount = count;
    const result = await throttledFetchData(innerCount);
    console.log(`===${innerCount}.2`);
  }, 50);

  return (
    <div className='container' onClick={handleClick}>
      CLICK ME
    </div>
  );
}

为什么要包裹两个油门？

因为弄错了，调试的时候一直卡在顺序问题

为什么没有重现问题？

只有快速点击才会出现