Open and Close Colorbox on Interval with Delay

Question

I am trying to write a small script that will run on the window continuously for a set number of seconds to show a colorbox that says saving, and after a short delay removing the colorbox.

I've tried:

window.setInterval(function () {
    $.colorbox({ innerWidth: 200, innerHeight: 50, scrolling: false, title: false, overlayClose: false, escKey: false, closeButton: false, html: "<h3 style='background: #fff;'>Auto saving..please wait..<img src=\"/images/ajax-loader.gif\" /></h3>" });
}, 10000)
window.setTimeout(function() {
    $.colorbox.close();
}, 12500);

But obviously timeout only runs once, not continuously so it works for the first time but it does not run subsequent times when the interval runs again.

Is there a way to create a function and attach it to the window so that every 10 seconds my colorbox will display and then shortly after it will be closed?

Answer 1

Put the timeout inside the interval.

I believe this is what you were trying to do

window.setInterval(function(){
  console.log("Opening");
  window.setTimeout(function(){
    console.log("Closing");
  }, 2500);
}, 10000);