Durante la entrevista, puede ejecutar el ciclo de luces rojas, amarillas y verdes cada segundo.
Al ver este problema, su primera reacción, supongo que puede optar por usar el temporizador directamente, el código es el siguiente:
function red() {
console.log('red');
}
function green() {
console.log('green');
}
function yellow() {
console.log('yellow');
}
function index() {
setTimeout(function() {
red();
setTimeout(function() {
green();
setTimeout(function() {
yellow();
setTimeout(function() {
index();
},0);
},1000);
},1000);
},1000);
}
index();
Si eres un principiante y escribes este código, es posible que sientas que eres increíble y muy satisfactorio, porque la función realmente se realiza. Pero cuando tengas un poco de experiencia laboral, encontrarás, maldita sea, que este código fue escrito por ese estúpido, tan frustrado. De hecho, este código está altamente acoplado, y si la lógica es complicada de cambiar, será muy problemático. El código también es muy legible, no es propicio para la depuración y no hay idea de encapsulación de funciones. Si usa esta respuesta en la entrevista, el entrevistador definitivamente le permitirá optimizar el código, cómo optimizar usando promesas. Usando promesas puedes escribir el siguiente código:
// 统一封装一个函数
function light(fun, timer) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(fun());
}, timer);
});
}
// 然后再调用
function index() {
light(red, 1000).then((data) => {
return light(green, 1000);
}).then((data) => {
return light(yellow, 1000);
}).then(() => {
index();
});
}
Después de implementar este código, el entrevistador pensará que no eres malo y las promesas básicas se seguirán utilizando, pero puede preguntarte, ¿sabes async y await? ¿Puedes usar async y await para lograr esta función? ? Si no comprende la función del generador, probablemente no lo hará. Async y await son en realidad su azúcar sintáctico. Await va seguido de un objeto de retorno de promesa. El código es el siguiente
function light(fun, timer) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(fun());
}, timer);
});
}
async function index() {
while(1) {
await light(red, 1000);
await light(green, 1000);
await light(yellow, 1000);
}
}
index();
¿Cree que este código es mucho más legible que el anterior, la depuración también es conveniente, y el código detrás de await debe esperar a que regrese para ejecutar el resolve () de la promesa antes de que continúe ejecutándose, haciendo que su código parezca una ejecución sincrónica? de.
Los estudiantes interesados pueden seguirme para intercambiar y estudiar juntos, y responder a sus preguntas de forma gratuita. (La premisa es que puedo resolver el problema del front-end)