javascript - 有没有办法为您的函数制作 "cooldown"？

Question

我目前正在为网站制作展示或幻灯片。除了一件事，一切都已准备就绪。用户能够向幻灯片发送垃圾邮件，从而导致跳过动画。我想为手动跳过幻灯片添加冷却时间。但我想不出任何解决办法。感谢您的帮助!

这是一个 fiddle 表演:enter link description here

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 >= images.length) {
    num = 0;
  }
  diashow.style.backgroundImage = images[num];
}

function prev() {
  var diashow = document.getElementById("diashow");
  num--;
  if (num < 0) {
    num = images.length - 1;
  }
  diashow.style.backgroundImage = images[num];
}

function stop() {
  clearInterval(interval);
}

function set() {
  interval = setInterval(next, 5000);
}

#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;
}

<div id="diashow" onmouseover="stop()" onmouseout="set()">
  <div id="divleft" onclick="prev()"></div>
  <div id="divright" onclick="next()"></div>
</div>

*编辑我检查了 fiddle ，显然连幻灯片的改变都不起作用叹息

Answer 1

只需在您的代码中放置一个delay 和一个“lastClick”变量。我已经测试过了，它正在工作:

var delay = 800;
var lastClick = 0;
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(){
    console.log(lastClick);
    if (lastClick >= (Date.now() - delay))
        return;
    lastClick = Date.now();
    var diashow = document.getElementById("diashow");
    num++;
    if(num >= images.length){num = 0;}diashow.style.backgroundImage = images[num];}
function prev(){
    if (lastClick >= (Date.now() - delay))
        return;
    lastClick = Date.now();
    var diashow = document.getElementById("diashow");
    num--;
    if(num < 0) {num = images.length-1;}diashow.style.backgroundImage = images[num];}
function stop(){clearInterval(interval);}
function set(){interval = setInterval(next, 5000);}

请随意编辑 delay 变量。

PS:var关键字已经过时，请查看let和const。