Run function after a function called in an interval?

Question

I'm making a Greasemonkey script and I found a problem. The website has a function run in an interval:

jQuery(function1.run);
setInterval(function1.run, function1.interval);

and I would want to run my function right after function1.run interval is finished. I can't change anything in the website code, so I can rely only on what I will add.

Until now everything I tried called my function only once.

Answer 1

I would want to run my function right after function1.run interval is finished. I can't change anything in website code

It'll be tricky to do that reliably. You can set up your own function to also run on an interval (by passing a function into setInterval), and if you make your interval less than theirs, you should be guaranteed that your function will be called at least once between calls to theirs (and sometimes twice), but you can't be sure it will run immediately after theirs.

Some thoughts:

1. Just making your timer interval a bit less than theirs; could still be a significant delay between their function running and yours:

   For example (runs for 30 seconds max):

// Their function: Once a second
var theirs = setInterval(function() {
  snippet.log("Theirs");
}, 1000);

// Your function: Once every 9/10ths of a second
var yours = setInterval(function() {
  snippet.log("Yours");
}, 900);

setTimeout(function() {
  snippet.log("Stopping");
  clearInterval(theirs);
  clearInterval(yours);
}, 30000);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

2. If the effect of their function running is something you can test in your function (so you know whether your function has run since the last time theirs did), you can schedule yours to run really frequently but not do anything if theirs hasn't run in the meantime. Set the interval of your function to be the longest time you're willing to have pass between when theirs runs and when yours does.

   Example:

var theyran = false;

// Their function: Once a second
var theirs = setInterval(function() {
  snippet.log("Theirs");
  theyran = true;
}, 1000);

// Your function: 20 times a second
var yours = setInterval(function() {
  if (theyran) {
    theyran = false;
    snippet.log("Yours");
  }
}, 50);

setTimeout(function() {
  snippet.log("Stopping");
  clearInterval(theirs);
  clearInterval(yours);
}, 30000);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

3. If their function does something you can get notified of, you can use that notification to call your function. For example, on a modern browser, if it modifies the DOM in some way, you can use mutation observers to receive a notification of that modification (on slightly older browsers, you may be able to use a library that simulates mutation observers using the old mutation events):

   Example:

// Their function: Once a second
var theirs = setInterval(function() {
  document.getElementById("content").innerHTML =
    "Theirs at " + new Date();
  snippet.log("Theirs");
}, 1000);

// Your function: Run by a mutation observer
var ob = new MutationObserver(function() {
  snippet.log("Yours");
});
ob.observe(document.getElementById("content"), {
  subtree: true,
  childList: true,
  characterData: true
});

setTimeout(function() {
  snippet.log("Stopping");
  clearInterval(theirs);
}, 30000);

<div id="content">
  In this scenario, their function modifies this div.
</div>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>