我无法使用简单的油门功能

Question

我知道还有很多其他人发布了有关节流功能的问题，并且已经滚动浏览了它们，但是大多数（如果不是全部）都超出了我的水平，或者包含了诸如jquery之类的东西以及真正奇怪的逻辑功能。

我只是试图限制用户每秒可以进行的更改数量，以阻止它们向垃圾内容发送垃圾邮件。

我在this youtube视频的帮助下编写了我的代码，大部分时间我都能理解。但是，它似乎不起作用，我看不到任何问题或障碍。

这是我第一次实现节流：

const throttle = (bad_func, limit) =>{
var flag = true;
document.getElementById('key').innerHTML = flag;
return function(){
  let context = this;
  let args = arguments;
  if(flag){
    bad_func.apply(context,args);
    bad_func();
    flag = false;
    setTimeout(()=>{
      flag = true;
    },limit);
  }
}
}

 ThrottledFunc = throttle(logKey, 4000);
 window.addEventListener('keydown', ThrottledFunc);

  function logKey(e){
  //           document.getElementById('EKey').innerHTML = e.which;
    if (e.which == 87){
     document.getElementById('demo').innerHTML = 'forwards';
     }

    else if (e.which == 83){
     document.getElementById('demo').innerHTML = 'backwards';
     }

    else{
     document.getElementById('demo').innerHTML = 'empty';
     }

     }

但是它不起作用，我仍然可以向w和s发送垃圾邮件。 “演示”已更改，但没有延迟。

对于我的第二次尝试，我只是说拧一下它，然后尝试将超时内容实现到该函数中，仍然没有运气：

window.addEventListener('keydown', logKey);

function logKey(e){
var flag = true;
var limit = 10000;
document.getElementById('key').innerHTML = flag;
if(flag){
  if (e.which == 87){
    flag = false;
    document.getElementById('demo').innerHTML = 'forwards';
    setTimeout(()=>{
      flag =true;
    }, limit);
  }

  else if (e.which == 83){
    document.getElementById('demo').innerHTML = 'backwards';
    flag = false;
    setTimeout(()=>{
      flag =true;
    }, limit);
   }
  }

else{
   document.getElementById('demo').innerHTML = 'empty';
  }
 }

我在做什么错？

Answer 1

您需要构建一个闭包，这意味着变量flag必须在每次logKey()调用之间保留其值。解决方案是将其存储在全局位置（如下所示）或在logKey可以访问它的父范围内。

window.addEventListener("keydown", logKey);

var flag = true;
var limit = 10000;

function logKey(e) {

  document.getElementById("key").innerHTML = flag;
  
  if (flag) {
    
    if (e.which == 87) {
      
      flag = false;
      document.getElementById("demo").innerHTML = "forwards";
      
      setTimeout(() => {
        flag = true;
      }, limit);
      
    } else if (e.which == 83) {
      
      document.getElementById("demo").innerHTML = "backwards";
      flag = false;
      
      setTimeout(() => {
        flag = true;
      }, limit);
      
    }
  } else {
    document.getElementById("demo").innerHTML = "empty";
  }
}

<div id="demo"></div>
<div id="key"></div>

---

我建议使用像lodash这样的提供throttle功能的库。

Answer 2

几年前，我进行了类似的锻炼。

我最终提出了一个非常小的实现：throttled-event-listener.js

这里是使用它的live demo。

这是调用代码的some docs。

希望这会有所帮助！