备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

JavaScript专项算法题（4）：异步

2023-01-10 108
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 异步挑战一 sayHowdy问题:思考时间（现在暂时不需要编写代码）：分析下方挑战一的代码，打印出来的结果会是怎样顺序的？Howdy先还是Partnah先？题解：123456789101112/* CHALLENGE 1 */function sayHowdy() { console.log('Howdy');}function testMe() { setTimeout(sayHowdy, 0); console.log('Partnah');}// After thinking it through, uncomment t

异步

挑战一 sayHowdy

问题:

思考时间（现在暂时不需要编写代码）：分析下方挑战一的代码，打印出来的结果会是怎样顺序的？Howdy先还是Partnah先？

题解：

1
2
3
4
5
6
7
8
9
10
11
12
 
/* CHALLENGE 1 */
functionsayHowdy() {
console.log('Howdy');
}
functiontestMe() {
  setTimeout(sayHowdy, 0);
console.log('Partnah');
}
// After thinking it through, uncomment the following line to check your guess!
// testMe(); // what order should these log out? Howdy or Partnah first?

挑战二 delayedGreet

问题：

构建delayedGreet函数，用于在3秒后打印“welcome”。

题解：

1
2
3
4
5
6
7
8
 
/* CHALLENGE 2 */
functiondelayedGreet() {
// ADD CODE HERE
  setTimeout(()=>console.log('welcome'), 3000);
}
// Uncomment the following line to check your work!
// delayedGreet(); // should log (after 3 seconds): welcome

挑战三 helloGoodbye

问题：

构建helloGoodbye函数。其会立刻打印”hello”，然后2秒后打印“good bye”。

代码：

1
2
3
4
5
6
7
8
9
 
/* CHALLENGE 3 */
functionhelloGoodbye() {
// ADD CODE HERE
  setTimeout(()=>console.log('good bye'), 2000);
console.log('hello');
}
// Uncomment the following line to check your work!
// helloGoodbye(); // should log: hello // should also log (after 3 seconds): good bye

挑战四 brokenRecord

问题：

构建brokenRecord函数。其会每秒钟都打印一次”hi again“。使用”End Code“按钮结束打印如果你对代码的运行满意的话。（译注：原题库网页上的按钮）

题解：

1
2
3
4
5
6
7
8
 
/* CHALLENGE 4 */
functionbrokenRecord() {
// ADD CODE HERE
  setInterval(()=>console.log('hi again'), 1000);
}
// Uncomment the following line to check your work!
// brokenRecord(); // should log (every second): hi again

挑战五 limitedRepeat

问题：

构建limitedRepeat函数。其会每秒钟打印一次”hi for now”，但仅仅持续5秒钟。如果你感到困难的话，研究clearInterval。

题解：

1
2
3
4
5
6
7
8
9
 
/* CHALLENGE 5 */
functionlimitedRepeat() {
// ADD CODE HERE
const intervalId = setInterval(()=>console.log('hi for now'), 1000);
  setTimeout(()=>clearInterval(intervalId), 5000);
}
// Uncomment the following line to check your work!
// limitedRepeat(); // should log (every second, for 5 seconds): hi for now

挑战六 everyXsecsForYsecs

问题：

构建everyXsecsForYsecs函数。其接受三个参数：一个函数func、一个数字interval和另外一个数duration。

everyXsecsForYsecs函数会以interval秒的间隔运行函数func,但会在duration秒后结束运行。

题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/* CHALLENGE 6 */
functioneveryXsecsForYsecs(func, interval, duration) {
// ADD CODE HERE
const intervalId = setInterval(func, interval * 1000);
  setTimeout(() => clearInterval(intervalId), duration * 1000);
}
// Uncomment the following lines to check your work!
functiontheEnd() {
console.log('This is the end!');
}
everyXsecsForYsecs(theEnd, 2, 20); // should invoke theEnd function every 2 seconds, for 20 seconds): This is the end!

挑战七 delayCounter

问题：

构建delayCounter函数，接受的第一个参数为一个数组（称为target），第二个参数为毫秒单位的数字（称为wait)，返回结果为一个函数。

当返回函数被调用时，它会依序打印从1到target之间的数字（含target），以wait毫秒的时间间隔。

题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
/* CHALLENGE 7 */
functiondelayCounter(target, wait) {
// Solution 1:
let intervalId;
let counter = 0;
returnfunctioninner() {
if (counter === 0) {
        counter++;
        intervalId = setInterval(() =>console.log(inner()), wait);
        } elseif (counter === target) {
        clearInterval(intervalId);
return counter;
        } else {
return counter++;
		}
	}
// Solution 2:
//return function inner() {
//	for(let i = 1; i<=target; i++){
//  setTimeout(()=>console.log(i), wait * i);
//	}
//}
}
// UNCOMMENT THESE TO TEST YOUR WORK!
// const countLogger = delayCounter(3, 1000)
// countLogger();
// After 1 second, log 1
// After 2 seconds, log 2
// After 3 seconds, log 3

挑战八 promised

问题：

构建promised函数，接受一个值作为参数。它会返回一个在两秒后触发resolve函数的Promise对象。

提示：到MDN去查阅下Promise对象的文档。

题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/* CHALLENGE 8 */
functionpromised (val) {
// ADD CODE HERE
const promiseObj = newPromise((resolve) => {
    setTimeout(() => resolve(val), 2000);
  });
return promiseObj;
}
// UNCOMMENT THESE TO TEST YOUR WORK!
// const createPromise = promised('wait for it...');
// createPromise.then((val) => console.log(val)); 
// will log "wait for it..." to the console after 2 seconds

挑战九 SecondClock

问题：

编写一个SecondClock类。其有两个方法：start和reset。

start：当调用时，start会每秒调用一个回调函数（this.cb，在构造器中定义），作用于一个变量。这个变量每次被回调函数使用时总是当前的时间秒数。

换言之，此回调函数每一秒钟都基于时钟信号的秒数而被调用，总是从1开始但并不使用当前计算机上的时钟信号的秒数值。

第一次“滴答”（值为1）发生在最初的secondClock调用的1秒后；

第二次“滴答”（值为2）发生在最初的secondClock调用的2秒后；

……

第六十次“滴答”（值为60）发生在最初的secondClock调用的60秒后；

第六十一次“滴答”（值为61）发生在最初的secondClock调用的61秒后；

第六十二次“滴答”（值为62）发生在最初的secondClock调用的62秒后；

以此类推。

reset：当调用时，完全停止SecondClock时钟的运行，另外重设时间为初始值。

提示：查阅setInterval和clearInterval。

题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
/* CHALLENGE 9 */
classSecondClock{
constructor(cb) {
// ADD CODE HERE
this.counter = 0
this.intervalId = 0
this.cb = cb
  }
// ADD METHODS HERE
  start () {
this.intervalId = setInterval(()=>this.cb(++this.counter), 1000);
  }
  reset () {
    clearInterval(this.intervalId);
this.counter = 0;
this.intervalId = 0;
  }
}
// UNCOMMENT THESE TO TEST YOUR WORK!
// const clock = new SecondClock((val) => { console.log(val) });
// console.log("Started Clock.");
// clock.start();
// setTimeout(() => {
//     clock.reset();
//     console.log("Stopped Clock after 6 seconds.");
// }, 6000);

挑战十 debounce

问题：

构建debounce函数，接受参数为一个回调函数callback和一个数值interval，返回结果为一个函数。此返回函数仅会在其上次调用回调函数的interval毫秒后才会被再次调用回调函数。

在interval毫秒时间内调用返回函数不会被响应或列入队列，然而时间信息会被重置（ 译注：interval时间重新开始计算）。

有关防抖函数的例子：请查看这个链接 https://css-tricks.com/debouncing-throttling-explained-examples/

题解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
/* CHALLENGE 10 */
functiondebounce(callback, interval) {
// ADD CODE HERE
// Solution 1:
let timeCounter = 0
let timeoutId = null
returnfunction() {
if (timeCounter === 0) {
      timeoutId = setTimeout(()=>{timeoutId = null;timeCounter = 0;}, interval);
      timeCounter++;
return callback();
    } else {
if (timeoutId) {
        clearTimeout(timeoutId);
      	timeoutId = setTimeout(()=>{timeoutId = null; timeCounter = 0;}, interval);
        timeCounter++;
      } else {
        timeCounter++;
return callback();
      }
    }
  }
//   // Solution 2 (Not efficient): 
//   return function (){
//     if (timeoutId) {
//       clearTimeout(timeoutId);
//       timeoutId = setTimeout(() => timeoutId = null, interval);
//     } else {
//       timeoutId = setTimeout(() => timeoutId = null, interval);
//       return callback();
//     }
//   }
}
// UNCOMMENT THESE TO TEST YOUR WORK!
functiongiveHi() { return'hi'; }
const giveHiSometimes = debounce(giveHi, 3000);
console.log(giveHiSometimes()); // -> 'hi'
setTimeout(function() { console.log(giveHiSometimes()); }, 2000); // -> undefined
setTimeout(function() { console.log(giveHiSometimes()); }, 4000); // -> undefined
setTimeout(function() { console.log(giveHiSometimes()); }, 8000); // -> 'hi'
文章标签：
JavaScript
前端开发
算法
关键词：
JavaScript异步
JavaScript算法
算法javascript
JavaScript专项算法
南京沂洲信息咨询有限公司
目录
相关文章
龙大吉
|
1月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise？
如何处理 JavaScript 中的异步操作和 Promise？
龙大吉
15 1
众所周知
|
1月前
|
前端开发 JavaScript 数据处理
在JavaScript中,什么是异步函数执行的例子
在JavaScript中,什么是异步函数执行的例子
众所周知
10 0
掘金防诈骗集团CEO
|
1月前
|
前端开发 JavaScript
JavaScript的异步操作
JavaScript的异步操作
掘金防诈骗集团CEO
19 2
会敲代码的_TT
|
2月前
|
算法 JavaScript 前端开发
彩票中奖率的真相：用 JavaScript 看透彩票背后的随机算法（下）
至于分发？我们可以参考一下市面上已有的一些概念做一下对比，下面是笼统的一个网络服务器的TPS预估值，也就是说彩票服务器在1秒内可以处理的最大请求数：
会敲代码的_TT
38 0
会敲代码的_TT
|
2月前
|
数据采集 算法 JavaScript
彩票中奖率的真相：用 JavaScript 看透彩票背后的随机算法（上）
原本这篇文章是打算叫「假如我是彩票系统开发者」，但细想一下，如果在文章中引用太多的 JavaScript 的话，反而不是那么纯粹，毕竟也只是我的一厢情愿，彩票开发也不全如本文所讲，有所误导的话便也是得不偿失了。
会敲代码的_TT
69 0
雷霆半月斩掉你的板砖
|
14天前
|
Web App开发 缓存 JavaScript
asm.js 的异步脚本
asm.js 的异步脚本
雷霆半月斩掉你的板砖
8 0
天玄TX
|
24天前
|
JavaScript 前端开发
JS 单线程还是多线程，如何显示异步操作
JS 单线程还是多线程，如何显示异步操作
天玄TX
22 2
阿珊和她的猫
|
1月前
|
缓存 JavaScript 算法
Vue.js中的diff算法：让虚拟DOM更高效
Vue.js中的diff算法：让虚拟DOM更高效
阿珊和她的猫
40 0
会敲代码的_TT
|
2月前
|
前端开发 JavaScript
前端JavaScript中异步的终极解决方案：async/await
在深入讨论 async/await 之前，我们需要了解一下 JavaScript 的单线程和非阻塞的特性。JavaScript 是单线程的，也就是说在任何给定的时间点，只能执行一个操作。然而，对于需要大量时间的操作（例如从服务器获取数据），如果没有适当的管理机制，这种单线程特性可能会导致应用程序的阻塞。为了解决这个问题，JavaScript 引入了回调函数和后来的 Promise，用来管理这些异步操作。
会敲代码的_TT
31 0
秋说
|
2月前
|
搜索推荐 算法 大数据
【数据结构入门精讲 | 第十篇】考研408排序算法专项练习（二）
【数据结构入门精讲 | 第十篇】考研408排序算法专项练习（二）
秋说
26 0

热门文章

最新文章

  • 1
    【MATLAB】GA_ELM神经网络时序预测算法
  • 2
    使用Python实现DBSCAN聚类算法
  • 3
    R语言聚类算法的应用实例
  • 4
    Java数据结构与算法-java数据结构与算法（二）
  • 5
    深度思考：雪花算法snowflake分布式id生成原理详解
  • 6
    【算法】七大经典排序（插入，选择，冒泡，希尔，堆，快速，归并）（含可视化算法动图，清晰易懂，零基础入门）
  • 7
    Machine Learning机器学习之决策树算法 Decision Tree（附Python代码）
  • 8
    神经网络分类算法原理详解
  • 9
    Java数据结构与算法-java数据结构与算法（五）
  • 10
    【C/C++ 数据结构】深入探索数据结构中算法复杂度：从C++和数学的视角
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    102
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    13
  • 3
    描述 JavaScript 中的垃圾回收机制。
    18
  • 4
    如何使用 JavaScript 操作 DOM？
    13
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    19
  • 6
    JavaScript 中的数组方法有哪些？
    10
  • 7
    JS设置日期为0时0分0秒
    27
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    24
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    21
  • 10
    深入理解JavaScript中的闭包与作用域链
    9

    • 相关课程

    更多
  • 相册服务中的故事生成算法介绍
  • Go语言核心编程 - 数据结构和算法
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 神经网络概览及算法详解

    • 相关电子书

    更多
  • 数据+算法定义新世界
  • 袋鼠云基于实时计算的反黄牛算法
  • Alink：基于Apache Flink的算法平台

    • 相关实验场景

    更多
  • TLS1.3的后量子算法集成
  • RSA非对称加密算法
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）