Estoy tratando de borrar/detener la ejecución de setInterval , y he realizado cambios en mi enfoque en función de otras preguntas/respuestas que he encontrado, pero aún no puedo hacer que setInterval deje de ejecutarse.
Lo que tengo aquí es un observador de mutación que detecta un cambio de clase, y cuando eso ocurre, si dos condiciones son verdaderas (la presencia de otras clases), entonces se ejecuta un seguimiento del cursor. Todo esto funciona muy bien.
Cuando se elimina una de las dos clases, .run-preview , quiero detener la ejecución de setInterval , como se ve en else if . También tengo una línea comentada allí donde estaba verificando que el else if está funcionando, y lo está.
Tengo una variable global intervalCursor = setInterval(move,1000/60); , y luego estoy usando esa variable para luego clearInterval(intervalCursor); .
const runPreview = document.querySelector('.projects'); new MutationObserver((mutations) => { if (mutations[0].attributeName === 'class') { console.log('Project list class changed'); if ($('html').hasClass('no-touchevents') && ($('.projects').hasClass('run-preview'))) { var mouseX=window.innerWidth/2, mouseY=window.innerHeight/2; var intervalCursor = setInterval(move,1000/60); var projectPreview = { el:$('.image-container'), x:window.innerWidth/2, y:window.innerHeight/2, w:300, h:300, update:function() { l = this.x-this.w/2; t = this.y-this.h/2; this.el.css({ 'transform': 'translate3d('+l+'px,'+t+'px, 0)' }); //console.log("transform"); } } $(window).mousemove (function(e){ mouseX = e.clientX; mouseY = e.clientY; //console.log("mousemove"); }) function move(){ projectPreview.x = lerp (projectPreview.x, mouseX, 0.1); projectPreview.y = lerp (projectPreview.y, mouseY, 0.1); projectPreview.update() console.log("move"); } function lerp (start, end, amt){ return (1-amt)*start+amt*end } } else if (!$('.projects').hasClass('run-preview')) { clearInterval(intervalCursor); return; //$('#content-container').addClass('test'); } } }) .observe(runPreview, { attributes: true });¿Estoy haciendo algo mal?
Gracias a Ouroborus , pude resolver esto al crear la variable por separado del MutationObserver y luego usarla para ejecutar setInterval(move,1000/60); luego. Permitiendo así que setInterval se borre/detenga cuando lo necesite.
var intervalCursor const runPreview = document.querySelector('.projects'); new MutationObserver((mutations) => { if (mutations[0].attributeName === 'class') { console.log('Project list class changed'); if ($('html').hasClass('no-touchevents') && ($('.projects').hasClass('run-preview'))) { var mouseX=window.innerWidth/2, mouseY=window.innerHeight/2; var projectPreview = { el:$('.image-container'), x:window.innerWidth/2, y:window.innerHeight/2, w:300, h:300, update:function() { l = this.x-this.w/2; t = this.y-this.h/2; this.el.css({ 'transform': 'translate3d('+l+'px,'+t+'px, 0)' }); //console.log("transform"); } } $(window).mousemove (function(e){ mouseX = e.clientX; mouseY = e.clientY; //console.log("mousemove"); }) intervalCursor = setInterval(move,1000/60); function move(){ projectPreview.x = lerp (projectPreview.x, mouseX, 0.1); projectPreview.y = lerp (projectPreview.y, mouseY, 0.1); projectPreview.update() console.log("move"); } function lerp (start, end, amt){ return (1-amt)*start+amt*end } } else if (!$('.projects').hasClass('run-preview')) { clearInterval(intervalCursor); //$('#content-container').addClass('test'); } } }) .observe(runPreview, { attributes: true });