Estoy tratando de mover la imagen de un artículo desde la parte superior de un artículo hasta la parte inferior.

El código dentro moveImage() (cf. el script a continuación) funciona pero solo en la segunda ejecución. Incluso si aumento el retraso de la primera moveImage() , solo en la segunda ejecución se mueve la imagen, incluso si esta segunda ejecución llega solo 1 ms después de la primera.

He notado este problema en varias ocasiones en diferentes sitios web y no entiendo por qué sucede esto. Al principio, pensé que era porque el DOM no se procesa por completo cuando se ejecuta el script, pero no es el caso:

• la segunda ejecución funciona cuando configuro el primer tiempo de espera en 1 y el segundo en 2
• aumentar el primer tiempo de espera a 10000 (mucho después de que la imagen sea visible) no hace que funcione en la primera ejecución.

Puede probar lo que quiero decir abriendo una nueva pestaña, abriendo la consola del desarrollador, abriendo la página desde nautil.us . Observe cuando la imagen superior desaparece en comparación con el console.log . Prueba con:

• tiempo de espera establecido en 1 y 2
• tiempo de espera establecido en 10000 y 12000.
• intente con el segundo tiempo de espera comentado

Asi que:

• ¿Por qué está pasando esto?
• ¿Cómo resolverlo mejor cuando se ejecuta la misma función dos veces?

Este es mi guion:

 // ==UserScript== // @name nautilus // @namespace http://tampermonkey.net/ // @version 0.1 // @author You // @description nautilus customized // @include * // ==/UserScript== (function() { if (window.location.hostname.includes('nautil.us')) { setTimeout(function () { console.log("1st run") moveImage() }, 1); // doesn't work even if it's 10000 setTimeout(function () { console.log("2nd run") moveImage() }, 2); }; function moveImage() { console.log("start moveImage()") try { var figures = document.getElementsByTagName("figure"); for (let figure of figures) { console.log(figure) var bottom = document.getElementsByClassName("article-similar-interest")[0] console.log(bottom) bottom.parentNode.insertBefore(figure, bottom) } } catch (e) { console.log("tamp error figure") console.log(e) } } })();