title: Is there a way to make a "cooldown" to your function?
body: <p>im currently making a diashow or a slideshow for an website. And everything is set up except one thing. The user is able to spam the slideshow thus resulting in skipped animation. I want to add a cooldown to skipping the slides manually. But i couldnt figure out any solution. Help is appreciated!</p>
  
  <p>Heres a fiddle of the diashow: <a href="http://jsfiddle.net/rc5xnqud/" rel="nofollow noreferrer">enter link description here</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var images = [
    "url(https://cdn.discordapp.com/attachments/461567193927385091/534789187560407045/picture1.png)",
    "url(https://cdn.discordapp.com/attachments/461567193927385091/534789189162762240/picture2.png)",
    "url(https://cdn.discordapp.com/attachments/461567193927385091/534789190500614147/picture3.png)",
    "url(https://cdn.discordapp.com/attachments/461567193927385091/534789199837265929/picture4.png)"
  ];
  var num = 0;
  var interval = setInterval(next, 5000);
  
  function next() {
    var diashow = document.getElementById("diashow");
    num++;
    if (num &gt;= images.length) {
      num = 0;
    }
    diashow.style.backgroundImage = images[num];
  }
  
  function prev() {
    var diashow = document.getElementById("diashow");
    num--;
    if (num &lt; 0) {
      num = images.length - 1;
    }
    diashow.style.backgroundImage = images[num];
  }
  
  function stop() {
    clearInterval(interval);
  }
  
  function set() {
    interval = setInterval(next, 5000);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#diashow {
    user-select: none;
    transition-duration: 1s;
    width: 600px;
    height: 224px;
    background-size: 600px 224px;
    background-position: center;
    background-image: url(https://cdn.discordapp.com/attachments/461567193927385091/534789187560407045/picture1.png);
  }
  
  #diashow div {
    width: 300px;
    height: 224px;
    background-color: transparent;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    transition-duration: 1s;
    opacity: 0.4;
  }
  
  #divleft:hover {
    box-shadow: inset 50px 0px 0px 0px white;
  }
  
  #divright:hover {
    box-shadow: inset -50px 0px 0px 0px white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="diashow" onmouseover="stop()" onmouseout="set()"&gt;
    &lt;div id="divleft" onclick="prev()"&gt;&lt;/div&gt;
    &lt;div id="divright" onclick="next()"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>*edit i checked the fiddle and apparently even the changing of the slides doesnt work <em>sigh</em></p>