Preguntas de entrevista asincrónicas y de un solo hilo

Asincrónico y de un solo subproceso

• tema
• Puntos de conocimiento
• responder

tema

• ¿Cuál es la diferencia entre sincrónico y asincrónico?
• Promesa manuscrita de conectarse a una imagen
• ¿Cuáles son los escenarios asincrónicos que se utilizan en el front-end?
  

Puntos de conocimiento

• Hilo único y asincrónico
• Escenarios de aplicación
• infierno de devolución de llamada 和 Peomise

Hilo único y asincrónico

• JS es un lenguaje de un solo subproceso y solo puede hacer una cosa al mismo tiempo
• Navegador y nodejs para admitir el proceso de inicio de JS, como Web Worker
• La representación JS y DOM comparten el mismo hilo, porque JS puede modificar la estructura DOM
• No puedo quedarme atascado cuando se encuentra en espera (solicitud de red, tarea de temporización)
• Necesita ser asincrónico
• Destruye el formulario de la función de devolución de llamada

Asincrónico y sincrónico

• Basado en JS es un lenguaje de un solo subproceso
• La asincronía no bloquea la ejecución del código
• La sincronización bloqueará la ejecución del código

Escenarios de aplicación

• Solicitud de red, como carga de imágenes ajax
• Tareas cronometradas, como setTimeout
  
  
  

Pregunta respuesta

¿Cuál es la diferencia entre sincrónico y asincrónico?

Basado en JS, es un lenguaje de un solo subproceso. La
asincronía no bloqueará la ejecución del código. La
sincronización bloqueará la ejecución del código.

Sincrónico es un modo de bloqueo y asíncrono es un modo sin bloqueo.
La sincronización significa que cuando un proceso está ejecutando una solicitud, si la solicitud tarda un tiempo en devolver la información, el proceso esperará hasta que reciba la información de retorno antes de continuar;
asíncrono significa que el proceso no necesita esperar eternamente. Continúe, pero continúe realizando las siguientes operaciones, independientemente del estado de otros procesos. Cuando hay un mensaje de retorno, el sistema notificará al proceso para su procesamiento, lo que puede mejorar la eficiencia de la ejecución.

Cargue una imagen con Promise a mano

Razones para promesas
Escenarios comunes de infierno de devolución de llamada:

// 回调地狱  callback hell
// 获取第一份数据
$.get(url1, (data1) => {
    
    
    console.log(data1)
    //获取第二份数据
    $.get(url2, (data2) => {
    
    
        console.log(data2)
        //获取第三份数据
        $.get(url3, (data3) => {
    
    
            console.log(data3)
            //...
        })
    })
}

Como se muestra arriba, multi-asincrónico propenso a los siguientes problemas:

El orden de ejecución de múltiples devoluciones asincrónicas es incontrolable.
El manejo de errores de excepción multi-asincrónico es muy complicado.
El anidamiento asincrónico múltiple conducirá al infierno de devolución de llamada.

Necesitamos urgentemente un paradigma de garantía que pueda garantizar el orden de ejecución asincrónico, garantizar la ejecución y el procesamiento asincrónico de errores de lanzamiento para solucionar estos problemas. La respuesta que nos da ES6 es Promesa.
Utilice promesas para hacer frente a los mismos problemas asincrónicos múltiples:

function getData(url) {
    
    
            return new Promise((resolve, reject) => {
    
    
        $.ajax({
    
    
            url,
            success(data) {
    
    
                resolve(data)
            },
            error(err) {
    
    
                reject(data)
            }
        })
    })
}
var url1 = '/datà1.json'
var url2 = '/datà2.json'
var url3 = '/datà3.json'
getData(url1).then(data1 => {
    
    
    console.log(data1)
    return getData(url2)
}).then(data2 => {
    
    
    console.log(data1)
    return getData(url3)
}).then(data3 => {
    
    
    console.log(data3)
}).catch(err => {
    
    
    console.log(err)
})

Promise convierte el formulario de devolución de llamada en un formulario no anidado, en un formulario de serie

Use Promise para cargar una imagen

function loadImg(src2) {
    
    
    return new Promise(
        //参数 resolve reject 均是函数
        (resolve,reject)=>{
    
    
            const img1 = document.createElement('image')
            img1.src = src2
            img1.onload=()=>{
    
    
                resolve(img1)
            }
            img1.onerror=()=>{
    
    
                const err = new Error(`图片加载失败！${
      
      src}`)
                reject(err)
            }
            
        }
    )
}
const url1 = 'https://img4.sycdn.imooc.com/szimg/5dbffa9109ef425a12000676-360-202.png'
const url2 = 'https://img4.sycdn.imooc.com/szimg/5dbffa9109ef425a12000676-360-202.png'
loadImg(url1).then(img=>{
    
    
    console.log(img.width)
    return img
}).then(img=>{
    
    
    console.log(img.height)
    return loadImg(url2)
}).then(img2=>{
    
    
    console.log(img2.width)
    return img2
}).then(img2=>{
    
    
    console.log(img2.height)
})
.catch(err=>{
    
    
    console.log(err)
})

Escenario de aplicación asincrónica

• Solicitud de red, carga de imágenes ajax
• Tareas cronometradas, como setTimeout

resumen

• La diferencia entre un solo hilo y asíncrono, asíncrono y síncrono
• Escenarios de aplicaciones asíncronas de front-end: solicitudes de red y tareas de sincronización
• Promesa resolución infierno de devolución de llamada

Conceptos básicos de JS

Revisar contenido

contenido

• Tipo de variable y cálculo
• Prototipo y cadena de prototipos
• Alcance y cierre
• Asincrónico y de un solo subproceso

Tema de revisión

Tipos de variables y cálculos-temas

• typeof puede determinar qué tipos
• Cuándo usar === Cuándo usar ====
• La diferencia entre el tipo de valor y el tipo de referencia
• Copia profunda manuscrita

Revisar los puntos de conocimiento

Tipos de variables y cálculos-puntos de conocimiento

• Tipo de valor VS tipo de referencia, modelo de pila, copia profunda
• tipo de operador
• Conversión de tipos, variables verdaderas y falsas

Prototipo y prototipo de cadena-tema

• Cómo determinar con precisión si una variable es una matriz
• Escribir a mano un jQuery simple, considerar complementos y extensibilidad
• Cómo entender la naturaleza prototipo de la clase.

Puntos de conocimiento de la cadena de prototipos y prototipos

• Clase y herencia, combinados con ejemplos de jQuery escritos a mano para comprender
• en vez de
• Prototipo y cadena de prototipos: diagrama y reglas de ejecución

Alcance y tema de cierre

• Diferentes escenarios de aplicación de esto, cómo tomar el valor.
• Función de encuadernación manuscrita
• Escenarios de aplicación de cierres en desarrollo real, con ejemplos
  

Alcance y cierre-puntos de conocimiento

• Alcance y variables libres
• Cierres: dos formas comunes y reglas de búsqueda de variables gratuitas
• esta

Tema asincrónico y de un solo subproceso

• ¿Cuál es la diferencia entre síncrono y asíncrono?
• Cargue una imagen con Promise a mano
  

Puntos de conocimiento asincrónicos y de un solo hilo

• La diferencia entre un solo hilo y asíncrono, asíncrono y síncrono
• Escenarios de aplicaciones asíncronas de front-end: solicitudes de red y tareas de sincronización
• Promesa resolución infierno de devolución de llamada