Agregar una operación cuando el elemento se desplaza hacia abajo

Por ejemplo, agregue una opción usando

  parentElement.scrollTop = parentElement.scrollHeight;

No pudo desplazarse hasta el final y enterró directamente a D.  

¿Cómo solucionarlo? Encuentra una manera:

     // 等待下一次渲染循环
      requestAnimationFrame(() => {
        // 将父级元素滚动到底部
        parentElement.scrollTop = parentElement.scrollHeight;
      });

 Agregue este método para desplazarse hasta el final 

2. ¿Pero qué hace este método?

requestAnimationFrameEs un método proporcionado por el navegador para ejecutar una función de devolución de llamada antes del próximo rediseño. Es una forma común de optimizar animaciones y otras operaciones que requieren un alto rendimiento.

Úselo requestAnimationFramepara garantizar que el desplazamiento se produzca antes del siguiente rediseño del navegador para lograr un rendimiento y una fluidez óptimos.

El siguiente es requestAnimationFrameel uso básico:

requestAnimationFrame(callback);

Entre ellos, callbackse encuentra la función de devolución de llamada que se ejecutará durante el próximo rediseño. Esta función recibe una marca de tiempo como parámetro, que indica la hora en que comenzó a ejecutarse la devolución de llamada.

El uso de ejemplo es el siguiente:

requestAnimationFrame(function(timestamp) {
  // 在这里执行需要在下一次重绘时进行的操作
});

En nuestro ejemplo de código anterior, envolvimos el código de desplazamiento hacia abajo en requestAnimationFrameuna función de devolución de llamada para garantizar que la operación de desplazamiento se realice en el siguiente ciclo de renderizado.

Tenga en cuenta que requestAnimationFramela compatibilidad es mejor, pero es posible que no sea compatible con versiones anteriores de navegadores. Por lo tanto, al usarlo requestAnimationFrame, es una buena idea verificar si el navegador lo admite o proporcionar alternativas para manejar los casos en los que no lo sea.

3. Entonces me pregunto cuál es la diferencia entre esto y settimeout.  

requestAnimationFramey setTimeoutson dos métodos diferentes que se utilizan para implementar la operación de ejecutar una función de devolución de llamada dentro de un intervalo de tiempo específico. Tienen algunas diferencias y escenarios aplicables.

1. Frecuencia de llamada:

   • setTimeout El método le permite configurar la función de devolución de llamada para que se ejecute después de un retraso específico, pero cuándo se ejecuta exactamente depende del bucle de eventos actual del navegador y de los recursos disponibles. La precisión de este método puede verse afectada.
   • requestAnimationFrame El método llamará a la función de devolución de llamada antes de volver a dibujar cada navegador, generalmente 60 veces por segundo para mantener la animación fluida. El navegador optimiza el rendimiento en función de su propia frecuencia de actualización.

2. Rendimiento y ahorro energético:

   • setTimeout Ejecutar la función de devolución de llamada después de que haya transcurrido el tiempo de retraso especificado puede resultar en cálculos y dibujos innecesarios, especialmente cuando la página está oculta o inactiva.
   • requestAnimationFrame La ejecución de la función de devolución de llamada se programa a través del bucle de renderizado del navegador para garantizar que se dibuje en el mejor momento y proporcionar un mejor rendimiento y efectos de ahorro de energía.

3. Efectos de animación:

   • requestAnimationFrame A menudo se utiliza para implementar efectos de animación porque se sincroniza con la frecuencia de actualización del navegador, evitando problemas como saltos de cuadros y desgarros.
   • setTimeout También se puede utilizar para efectos de animación, pero debido a la incertidumbre de su tiempo de ejecución, puede causar incoherencia o problemas en la animación.

En resumen, se recomienda si necesita implementar efectos de animación o realizar operaciones antes del próximo rediseño requestAnimationFrame. Para operaciones ordinarias de ejecución retrasada, setTimeoutes una opción más común.

Cuatro: consejos 

**** Agregar una entrada no es más que escribir un obj que contiene otros atributos y luego insertarlo en la matriz original (la matriz a la que se debe agregar la entrada).