Adding timeout to a loop

Question

I have a function that will perform an action when the timer reaches 5000ms:

         var timer = new Timer(function () {
            console.log("refreshingBid");
            refreshBid();
        }, 5000);

        timer.pause();
        if (isElementInViewport() === true) {
            console.log("element in view");
            timer.resume();
        } else {
            timer.pause();
            console.log("element is out of view")
        }

//I am trying to loop this 5 times with the 5000ms delay - the code I am using for this is:

    for (i=0;i<=5;i++)
    {
    MyFunc();
    }

It seems regardless of whether I put the for loop in the timer or whether I put the timer inside the for loop the result is the same where all 5 loops happen instantaneously instead of with a delay of the timer being applied? I'm not sure what i'm doing wrong here... Any help would be appreciated!

Sorry, edit to include the complete code below:

<script>
    var iframe2 = document.getElementById('postbid_if');
    function isElementInViewport() {
        var el = document.getElementById('postbid_if')
        console.log(el)
        var rect = el.getBoundingClientRect();
        console.log(rect)

        return rect.bottom >= 0 &&
            rect.right >= 0 &&
            rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
            rect.top < (window.innerHeight || document.documentElement.clientHeight);
    }

    function Timer(callback, delay) {
        var timerId, start, remaining = delay;

        this.pause = function () {
            window.clearTimeout(timerId);
            remaining -= new Date() - start;
        };

        this.resume = function () {
            start = new Date();
            window.clearTimeout(timerId);
            timerId = window.setTimeout(callback, remaining);
        };

        this.resume();
    }

    for (i = 0; i <= 5; i++) {
        MyFunc();
    }

    var timer = new Timer(function () {
        console.log("refreshingBid");
        refreshBid();
    }, 5000);

    timer.pause();
    if (isElementInViewport() === true) {
        console.log("element in view");
        timer.resume();
    } else {
        timer.pause();
        console.log("element is out of view")
    }

</script>

Have added the complete code with Timer - the idea here is when an element is in view a timer will resume, when it is out of view it will pause. Upon being in view for 5000ms the function will run the refreshBids() function. — Jonathan Devereux
– Jonathan Devereux, Commented Oct 24, 2018 at 21:28

Artanis · Accepted Answer · 2018-10-24 21:25:05Z

2

It's because it's looping through quickly 5 times then all 5 loops are delaying after the 5 seconds. The timeout pauses it after 5 seconds, not for 5 seconds up front.

answered Oct 24, 2018 at 21:25

Artanis

6312 gold badges10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dacre Denny · Accepted Answer · 2018-10-24 21:26:37Z

Perhaps you could revise your code in this way to achieve the timer based iterations as required:

//Track the current iteration
var i = 0;

function MyFunc() {      

    var timer = new Timer(function () {
        console.log("refreshingBid");
        refreshBid();

        // The current timer has completed. If the current 
        // iteration is less than 5...
        if(i < 5) {

          i++;

          // .. then start another timer for the next iteration
          MyFunc();
        }
    }, 5000);

    timer.pause();
    if (isElementInViewport() === true) {
        console.log("element in view");
        timer.resume();
    } else {
        timer.pause();
        console.log("element is out of view")
    }

}

// Start the first iteration
MyFunc();

Thats the way JavaScript goes with its await/async... How this called? Nested loopbacks?
Yep, async/await could be used here to make the solution a little more elegant.

Collectives™ on Stack Overflow

Adding timeout to a loop

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related