How to pause timer on mouse over element (Javascript/JQuery)

I tried looking at other answers but with no luck.

I have iFrame that refreshes every 10 seconds, but it is frustrating if user is using iFrame at the moment.
So I want to make it when there is mouse cursos over iframe, that iframe won't be refreshed.

function iframe() {
  $("#iframe").attr("src","admin.php"); 
}
var timee = 10000;

var intervalId = window.setInterval(function(){
  iframe();
}, timee);

Any help is appreciated.

You can use onmouseenter and onmouseout events to listen to the mouse being above the frame, clear the interval and restart it once the mouse leaves again.

It doesn't necessarily "pause" the refresh, but instead aborts it and restarts the interval once the mouse leaves, but that's a lot easier than trying to pause it.

Here is an example that changes the background color every second, unless hovered over.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const timee = 1000;

const iframe = document.getElementById("iframe");
iframe.addEventListener("mouseenter", pause);
iframe.addEventListener("mouseout", unpause);

let intervalId;

function pause() {
  window.clearInterval(intervalId);
}

function unpause() {
  intervalId = window.setInterval(function() {
    iframeUpdate();
  }, timee);
}

// start the interval on the first run
unpause();

function iframeUpdate() {
  iframe.style.backgroundColor = `hsl(${Math.random() * 360}, 80%, 50%)`;
}

<!-- language: lang-css -->

#iframe {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

<!-- language: lang-html -->

<iframe id="iframe"></iframe>

<!-- end snippet -->