五个JavaScript Util 函数的趣味应用

爱创乐育知识速递

于 2021-09-28 17:30:06 发布

阅读量336

点赞数 2

分类专栏：前端 ES6 文章标签： javascript node.js vue.js web前端

本文链接：https://blog.csdn.net/icktpxcls/article/details/120533812

版权

本文介绍了五个JavaScript实用函数的应用，包括模拟延迟、分解长期运行的任务、为Promise添加超时限制、按顺序完成Promise以及限制同时完成的Promise数量。通过示例代码展示了如何使用这些函数来优化JavaScript程序的执行效率和用户体验。

摘要由CSDN通过智能技术生成

1、模拟延迟

有时我们需要模拟某些动作之间的特定延迟。使用以下代码就很容易实现：

function delay(timeout) {
return new Promise(
(resolve) => {
const timeoutHandle =
setTimeout(() => {
clearTimeout(timeoutHandle);
resolve()
}, timeout);
});
}
这个util函数的用法如下：

async function(){
console.log(‘The first log’);
await delay(1000);
console.log(‘The second log with 1000 ms delay’)
}
作为输出，我们将立即看到第一个日志，第二个日志在 1000 毫秒后出现。

2、分解长期运行的任务

由于 JS 是一种单线程语言，我们可能会遇到 UI 延迟或无响应的服务器来处理新的即将到来的请求。它通常发生在应用程序试图处理长时间运行的任务时。

有时，需要一个工具完成将长时间运行的任务进行拆分为多个块，以便有机会完成另一个应用程序代码。这是代码：

function nextFrame() {
const nextTick = requestAnimationFrame || setImmediate.
return new Promise((res) => nextTick(() => res()))
}
这个util函数的用法：