BotBeta
Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
Suscripción a IA
El código que proporcionaste utiliza un$(document).ready(function() {
let timeout; // Temporizador para la inactividad
let lastObservedDiv; // Variable para almacenar el último div observado
let alertedDiv; // Variable para evitar múltiples alertas
// Crear un nuevo observer
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
lastObservedDiv = entry.target; // Guardar el último div observado
// Reiniciar el temporizador
clearTimeout(timeout);
timeout = setTimeout(() => {
if (lastObservedDiv && lastObservedDiv !== alertedDiv) {
// Enviar la alerta y marcar que ya se envió
alertedDiv = lastObservedDiv;
alert("No ha habido movimiento de scroll durante 3 segundos. Estás observando el div con ID: " + $(lastObservedDiv).attr('datapro'));
}
}, 10000);
}
});
});
// Seleccionar todos los divs con la clase 'sessim'
$('.sessim').each(function() {
observer.observe(this); // Observar cada div
});
});
tengo una duda, porque no funciona con los nuevos divs sessim agregados al dom?
IntersectionObserver para observar los divs con la clase sessim, pero si nuevos divs se añaden al DOM después de que se ha creado el observer, estos nuevos divs no serán observados automáticamente.Para solucionar esto, puedes re-observar dinámicamente cualquier nuevo div que se agregue al DOM. Una forma de hacerlo es mediante el uso de un
MutationObserver, que puede monitorear cambios en el DOM y re-observar los nuevos nodos. Aquí tienes un ejemplo de cómo implementarlo:### Código Modificado con
MutationObserver
JavaScript:
$(document).ready(function() {
let timeout; // Temporizador para la inactividad
let lastObservedDiv; // Variable para almacenar el último div observado
let alertedDiv; // Variable para evitar múltiples alertas
// Crear un nuevo observer
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
lastObservedDiv = entry.target; // Guardar el último div observado
// Reiniciar el temporizador
clearTimeout(timeout);
timeout = setTimeout(() => {
if (lastObservedDiv && lastObservedDiv !== alertedDiv) {
// Enviar la alerta y marcar que ya se envió
alertedDiv = lastObservedDiv;
alert("No ha habido movimiento de scroll durante 3 segundos. Estás observando el div con ID: " + $(lastObservedDiv).attr('datapro'));
}
}, 10000);
}
});
});
// Función para observar todos los divs con clase 'sessim'
function observeSessimDivs() {
$('.sessim').each(function() {
observer.observe(this); // Observar cada div
});
}
// Inicializa la observación al cargar el DOM
observeSessimDivs();
// Crear un MutationObserver para observar cambios en el DOM
const mutationObserver = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
// Si se añaden nuevos nodos, volver a observar los divs
observeSessimDivs();
}
}
});
// Configuración del observer para monitorear cambios en el DOM
mutationObserver.observe(document.body, {
childList: true,
subtree: true // Monitorea cambios en todos los niveles del DOM
});
});
### Explicación de Modificaciones:
1.
observeSessimDivs: Se creó una función que obtiene y observa todos los divs con la clase sessim.2.
MutationObserver: Se agregó un nuevo MutationObserver que monitorea cambios en el DOM. Cuando se detectan nuevos nodos (en este caso, divs nuevos), llama a observeSessimDivs para observarlos.3. Configuración: Configuramos el
MutationObserver para observar cambios en la estructura del DOM, incluyendo nodos hijos y en todos los niveles del árbol (subtree: true).Con estas modificaciones, cualquier nuevo div con la clase
sessim que se agregue al DOM será observado automáticamente. Esto debería resolver tu problema. ¡Prueba el código y avísame si necesitas más ayuda!

