3 preguntas por día (24)

2020/3/27

El problema

html: ¿Cuál es el orden de ejecución de las cuatro pseudo-clases en la etiqueta a?

css: aplicación BFC

js: La diferencia entre setTimeout, Promise, Async / Await

html: ¿Cuál es el orden de ejecución de las cuatro pseudo-clases en la etiqueta a?

• enlace
• visitó
• flotar
• activo

Conocido como LV HAO - lv bueno

css: aplicación BFC

Trigger BFC

• Elementos flotantes (el atributo flotante no es ninguno)
• la posición es absoluta o fija
• bloquear elementos que no son visibles
• display 为 inline-block, table-cell, table-caption

1. Los márgenes de dos cuadros adyacentes se superponen

   div:first-child{
       width:200px;
       height: 200px;
       background: red;
       margin: 40px;
   }
   
   div:last-child{
       width: 200px;
       height: 200px;
       background: green;
       margin: 40px;
       /* display: inline-block; */
   }
   
   <div></div>
   <div></div>
   

2. Caja padre-hijo

   .outer{
       background: pink;
       width: 500px;
       height: 500px;
       /* overflow: hidden; */
   }
   
   .inner{
       background: red;
       width: 50px;
       height: 50px;
       margin-top: 30px;
   }
   
   <div class="outer">
       <div class="inner"></div>
   </div>
   

3. Se establece el modelo de cuadro de desbordamiento y el margen vertical entre sus elementos secundarios no se fusionará, pero el margen entre su elemento padre y el elemento adyacente se fusionará (contraste el segundo)

<style>

    *{
        margin: 0;
        padding: 0;
    }

    .outer{
        background: pink;
        width: 500px;
        height: 500px;
        overflow: hidden;
        margin: 50px;
    }

    .inner{
        background: red;
        width: 50px;
        height: 50px;
        margin-top: 30px;
    }

    .neg{
        width: 100px;
        height: 100px;
        background: skyblue;
        margin: 50px;
    }
</style>


<div class="outer">
    <div class="inner"></div>
</div>
<div class="neg"></div>

4. Elementos adyacentes con pantalla: bloque en línea o flotante: izquierda o posición: absoluto no se fusionará

   Puede intentar reemplazar display: inline-block en el primer ejemplo con overflow: hidden

Solo entiendo mucho, puedes ver este resumen

Resumen

js: La diferencia entre setTimeout, Promise, Async / Await

1. setTimeout

console.log('script start')	//1. 打印 script start
setTimeout(function(){
    console.log('settimeout')	// 4. 打印 settimeout
})	// 2. 调用 setTimeout 函数，并定义其完成后执行的回调函数
console.log('script end')	//3. 打印 script start
// 输出顺序：script start->script end->settimeout

2. promesa

Promise en sí mismo es una función de ejecución inmediata síncrona . Cuando se ejecuta resolver o rechazar en el ejecutor, esta es una operación asíncrona, entonces se ejecutará primero / catch. Cuando se complete la pila principal, se llamará al método almacenado en resolver / rechazar Cuando se ejecuta, al imprimir p, es el resultado devuelto de la impresión, una instancia de Promise.

console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

Cuando el hilo principal de JS se ejecuta en el objeto Promise,

• La devolución de llamada de promise1.then () es una tarea
• promise1 se resuelve o rechaza: entonces esta tarea se colocará en la cola de microtask de la ronda de bucle de eventos actual
• Promise1 está pendiente: esta tarea se colocará en una cola de microtask en la ronda futura (posiblemente próxima) del ciclo de eventos
• La devolución de llamada de setTimeout también es una tarea, se pondrá en la cola de macrotask incluso si es 0 ms

3. asíncrono / espera

async function async1(){
   console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}

console.log('script start');
async1();
console.log('script end')

// 输出顺序：script start->async1 start->async2->script end->async1 end

La función asíncrona devuelve un objeto Promise. Cuando se ejecuta la función, regresará una vez que se encuentre en espera. Espere hasta que se complete la operación asincrónica activada y luego ejecute la instrucción detrás del cuerpo de la función. Se puede entender que es abandonar el hilo y saltar del cuerpo de la función asíncrona.

Por ejemplo:

async function func1() {
    return 1
}

console.log(func1())

Obviamente, el resultado de func1 es en realidad un objeto Promise. Por lo tanto, también podemos usarlo para procesar la lógica posterior.

func1().then(res => {
    console.log(res);  // 30
})

El significado de esperar es esperar, es decir, la función asíncrona debe esperar a que se complete la ejecución de la función después de esperar y tener un resultado de retorno (objeto Promesa) antes de que pueda continuar ejecutando el siguiente código. Aguardar logra el efecto de sincronización devolviendo un objeto Promise.

Más visible setTimeout, Promise, Async / Await

---

Fuente de la pregunta