5 个JavaScript Util 函数为你的应用程序增添趣味

web前端开发 / 2021-09-10 10:45:24

5 个JavaScript Util 函数为你的应用程序增添趣味
web前端开发 今天
图片

英文 | https://betterprogramming.pub/5-javascript-promises-util-functions-to-spice-up-your-apps-665affca236c

翻译 | 小爱



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函数的用法:

async longRunningTask(){
   let step = 0;
   while(true){
        if (++step % 5 === 0){
             await nextFrame();
        }
   }
}
longRunningTask();
console.log('The first log')
尽管我们运行了一个无限循环,但这个函数的第 5 步为处理其他应用程序的代码开辟了道路。

3、为 Promise 添加超时限制

如果某些操作正在使用 Promise 处理,那么使用以下代码很容易为其添加超时限制:

function addTimeoutToPromise(targetPromise, timeout) {
   let timeoutHandle;
   const timeoutLimitPromise = new Promise((res, rej) => {
       timeoutHandle = setTimeout(
           () => rej(new Error('Timeout exceeded')),
           timeout
       );
   });
   return Promise.race([targetPromise, timeoutLimitPromise])
       .then((res) => {
           clearTimeout(timeoutHandle);
           return res;
       });
}
这个util函数的用法如下图所示:

addTimeoutToPromise(
     delay(1000).then(() => console.log('Completed')), 2000
);
// --> Completed
addTimeoutToPromise(
    delay(2000), 1000
).catch((e) => console.error(e.message))
// --> Timeout exceeded
4、按顺序完成 Promise

假设我们有一个 API,它对可以同时完成的请求数量有限制。它迫使我们开发一种方法,允许一个接一个地完成一堆承诺。

首先,与 Promise.all 不同,我们不能只将一个 promise 数组传递给我们的方法,因为一旦创建了 promise,所有这些都会立即完成。

因此,我们的 util 函数应该获得一组函数,这些函数可以按需创建承诺,我们可以控制这个承诺何时开始竞争,如下所示:

function completeInSequence(promiseFactories: () => Promise<any>){
    ...
}
从字面上看,我们需要构建以下结构,它允许按顺序完成承诺。下面是一些代码来做到这一点:

Promise.resolve()
   .then(() => promiseFacrories[0]()
   .then(() => promiseFactories[1]())
   ...
   .then(() => promiseFactories[N]())
在这里, Promise.resolve 和 Array.reduce 发挥作用。Promise.resolve 通常用作构建承诺链的起点。这是帮助解决此问题的代码:

function completeInSequence(promiseFactories: () => Promise<any>) {
   return promiseFactories.reduce(
      (chain, promiseFactory) => chain.then(()=> promiseFactory()),
      Promise.resolve()
   );
}
很简单的实现。让我们用以下内容测试它:

completeInSequence([
   () => delay(1000).then(() => console.log('1')),
   () => delay(1000).then(() => console.log('2')),
   () => delay(1000).then(() => console.log('3'))
])
你将看到所有日志消息之间的间隔为 1000 毫秒。

5、只同时完成 N 个 Promise

我们考虑到使用 API 的带宽是很酷的,但我认为它可能允许我们同时完成多个请求。

好吧,和前面的例子一样,我们仍然需要一个创建 promise 的函数,它提供了控制 promise 何时完成的机会。第二个变量是池的最大大小,它反映了可以同时处理的承诺数量。下面是一个例子:

function completePromisesInPool(
    promiseFactories: () => Promise<any>,
    maxPoolSize: number
) { .... }
首先,函数应该在我们需要开始完成N个promise的地方返回Promise。

之后,只要任何一个运行承诺完成,就意味着我们在池中有一个空闲插槽,如果它仍然存在,另一个承诺可能会取代这个位置,否则解决包装承诺。这是执行此操作的函数:

function completePromisesInPool(
    promiseFactories: () => Promise<any>,
    maxPoolSize: number
) {
   return new Promise((res) => {
      let nextPromise = 0;
      const runPromise = () => {
         nextPromise++;
         if (nextPromise > promiseFactories.length) {
            res();
            return;
         }
         return promiseFactories[nextPromise-1]()
              .then(() => runPromise())
      }

      Array.from({length: maxPoolSize})
           .map(() => runPromise());
     })
}
让我们使用以下内容对其进行测试:

completePromisesInPool([
   () => delay(1000).then(() => console.log('1')),
   () => delay(1000).then(() => console.log('2')),
   () => delay(1000).then(() => console.log('3')),
   () => delay(1000).then(() => console.log('4')),
   () => delay(1000).then(() => console.log('5')),
   () => delay(1000).then(() => console.log('6'))
  ], 2)
你将看到 console.log 以 1000 毫秒的间隔分批打印两条消息。这是它的样子:

图片

就是这个样子。

感谢你的阅读。

学习更多技能

请点击下方公众号

图片

图片

图片

阅读 543
写下你的留言

:,。视频小程序赞,轻点两下取消赞在看,轻点两下取消在看


----------------------------
本文由新墨整理并发布。转载来自互联网,若侵权则删除!
新墨5年开发经验,45名团队成员,上线已达100+产品,于北京和成都2个城市提供技术开发服务。致力于提供APP开发,小程序开发,微信开发,IOT物联网开发,电商系统开发,教育系统开发,H5开发,游戏开发,用户体验设计,课件设计

新墨官网地址:http://www.sinmore.com.cn/
新墨物联网站:http://www.sinmore.cn/
布鸽科技:http://www.buge.vip/

热门文章
最新文章
推荐文章