javascript 中常见的可中断执行编程范式

javascript

如何跳出嵌套循环语句？

在日常开发中，有时候会通过编写双重 for 循环语句来完成业务逻辑，跳出 for 循环使用 break; 语句，如果需要跳出双重 for 循环就需要定义 label 语句了

1
2
3
4
5
6
7
8
9
10
11
let num = 0;
outermost:
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    if (i === 5 && j === 5) {
      break outermost;
    }
    num++;
  }
}
console.log(num);

如何实现脚本执行“睡眠”

在 debug 阶段有时候需要用到下面的 sleep 函数来中断代码执行：模拟网络请求、暂停执行逻辑查看过渡效果。

1
2
3
4
5
6
7
8
9
function sleep(time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}

(async function () {
    console.log('开始执行' + new Date());
    await sleep(3000);
    console.log('等待3s后继续执行' + new Date());
})();

如何中止已经发起的网络请求

当用户频繁点击“提交”或“查询”按钮向后台发起请求时，为了获得优秀的用户体验和节省网络带宽，开发者需要对用户的点击行为进行约束，常见的方式有切换 loading 态处理，如下图所示

在点击按钮后切换成 loading 样式，这时在请求返回前是不能发起新的请求的，这样做有个弊端：当网络请求时间长一些的时候，用户无法取消当前请求，切换新的请求入参，发起新的请求。

解决方案：可以利用 JS 新特性 AbortController 来实现 fetch 请求的中断。演示代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function FooComponent(props) {
    useEffect(() => {
      const controller = new AbortController();
      const { signal } = controller;

      const request = (async () => {
        const data = await fetch(url, query, { signal });
        // perfom setData
      })();

      return () => controller.abort();
    }, [query]);

    return <>...</>;
}