Question

im目前正在为网站进行放映或幻灯片放映。除了一件事，一切都已设置。用户能够对幻灯片进行垃圾邮件处理，从而导致跳过动画。我想添加一个冷却时间来手动跳过幻灯片。但我不知道任何解决方案。感谢您的帮助！

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>

* edit我检查了小提琴，显然即使幻灯片的更换也不起作用叹气

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。

Answer 2

我不确定这是否行得通，我也是Java语言的学习者。假设有一个名为click1()的按钮单击功能，还有一个名为loadclick1()的功能，所以简而言之，看起来像

function loadclick1() {
    if (//button-clicked) {
        function click1() {
            //Animation code here;
            setTimeout(loadclick1(), 3000) //This will set a timeout until the function is ready
        }
    }
}

Answer 3

我也有相同的想法，只是为了让按钮触发的功能降温（避免以编程方式向服务器发送垃圾邮件）

我的问题是不允许通过javascripting访问冷却变量

我这样解决问题：

const buttonFunction = (function setup () { 
// const prevents from reassigning
  const coolDown = 5000 // 5s cooldown
  let lastClick = Date.now() - coolDown // to start fresh

  function startCoolDown () {
    lastClick = Date.now() // maybe useless function
  }
  function checkCoolDown () {
    const notOver = Date.now() - lastClick < coolDown
    if (notOver) alert('stop spamming the server !')
    // using an alert it will block javascript loops
    return !notOver
  }

  return function (arguments) {
    if (checkCoolDown()) {
      startCoolDown()

      // do your stuff with arguments here
    }
  }
})() // all variables are safely nested !

和HTML按钮：

<button onclick="buttonFunction('argument')">
  button
</button>

到目前为止，它似乎是防弹的，有人看到缺陷了吗？

Answer 4

您在想的就是“节流”

这个SO问题为您提供了一个解决方案： Simple throttle in js

上面的无耻复制粘贴：

// Returns a function, that, when invoked, will only be triggered at most once
// during a given window of time. Normally, the throttled function will run
// as much as it can, without ever going more than once per `wait` duration;
// but if you'd like to disable the execution on the leading edge, pass
// `{leading: false}`. To disable execution on the trailing edge, ditto.
function throttle(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = Date.now();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};

有没有办法使您的功能“冷却”？

4 个答案: