ORIGIN全文地址:JavaScript专项算法题4异步推荐编程鼠标·电竞鼠标异步挑战一 sayHowdy问题:思考时间现在暂时不需要编写代码分析下方挑战一的代码打印出来的结果会是怎样顺序的Howdy先还是Partnah先题解/* 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。题解/* CHALLENGE 2 */functiondelayedGreet(){// ADD CODE HEREsetTimeout(()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。代码/* CHALLENGE 3 */functionhelloGoodbye(){// ADD CODE HEREsetTimeout(()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“按钮结束打印如果你对代码的运行满意的话。译注原题库网页上的按钮题解/* CHALLENGE 4 */functionbrokenRecord(){// ADD CODE HEREsetInterval(()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。题解/* CHALLENGE 5 */functionlimitedRepeat(){// ADD CODE HEREconstintervalIdsetInterval(()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秒后结束运行。题解/* CHALLENGE 6 */functioneveryXsecsForYsecs(func,interval,duration){// ADD CODE HEREconstintervalIdsetInterval(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毫秒的时间间隔。题解/* CHALLENGE 7 */functiondelayCounter(target,wait){// Solution 1:letintervalId;letcounter0;returnfunctioninner(){if(counter0){counter;intervalIdsetInterval(()console.log(inner()),wait);}elseif(countertarget){clearInterval(intervalId);returncounter;}else{returncounter;}}// Solution 2://return function inner() {// for(let i 1; itarget; 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对象的文档。题解/* CHALLENGE 8 */functionpromised(val){// ADD CODE HEREconstpromiseObjnewPromise((resolve){setTimeout(()resolve(val),2000);});returnpromiseObj;}// 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。题解/* CHALLENGE 9 */classSecondClock{constructor(cb){// ADD CODE HEREthis.counter0this.intervalId0this.cbcb}// ADD METHODS HEREstart(){this.intervalIdsetInterval(()this.cb(this.counter),1000);}reset(){clearInterval(this.intervalId);this.counter0;this.intervalId0;}}// 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/题解/* CHALLENGE 10 */functiondebounce(callback,interval){// ADD CODE HERE// Solution 1:lettimeCounter0lettimeoutIdnullreturnfunction(){if(timeCounter0){timeoutIdsetTimeout((){timeoutIdnull;timeCounter0;},interval);timeCounter;returncallback();}else{if(timeoutId){clearTimeout(timeoutId);timeoutIdsetTimeout((){timeoutIdnull;timeCounter0;},interval);timeCounter;}else{timeCounter;returncallback();}}}// // 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(){returnhi;}constgiveHiSometimesdebounce(giveHi,3000);console.log(giveHiSometimes());// - hisetTimeout(function(){console.log(giveHiSometimes());},2000);// - undefinedsetTimeout(function(){console.log(giveHiSometimes());},4000);// - undefinedsetTimeout(function(){console.log(giveHiSometimes());},8000);// - hi题库原地址http://csbin.io/async