I am trying to move the image from an article from the top of an article to the bottom.

The code inside moveImage() (cf. the script below) works but only on the second run. Even if I increase the delay of the first moveImage(), it's only on the second run that the image is moved, even if this second run comes only 1ms after the first one.

I have noticed this problem on several occasions on different websites and I don't understand why this is happening. At first, I thought that it is because the DOM is not completely rendered when the script runs but it's not the case:

• the second run works when I set the first timeout to 1 and the second to 2
• increasing the first timeout to 10000 (well after the image is visible) doesn't make it work on the first run.

You can try what I mean by opening a new tab, opening the developer console, opening the page from nautil.us. Notice when the top image disappears compared to the console.log. Try with:

• timeout set to 1 and 2
• timeout set to 10000 and 12000.
• try with the second timeout commented out

So:

• Why is this happening?
• How to solve it in a better when with running the same function twice?

This is my script:

// ==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)
        }
      
    }

})();