Я не могу заставить работать простую функцию газа - PullRequest
Новая
       4

Я не могу заставить работать простую функцию газа

0 голосов
/ 08 января 2020

Я знаю, что есть куча других людей, которые задавали вопросы о функциях регулирования, и я прокручивал их, но большинство, если не все, намного выше моего уровня или включают такие вещи, как jquery и действительно странные логики c для функция.

Я просто пытаюсь ограничить количество изменений, которые пользователь может вносить в секунду, чтобы не допустить рассылки спама.

Я написал свой код с помощью 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';
  }
 }

Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 08 января 2020

Вам нужно построить замыкание, это означает, что переменная 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>

Я бы предложил использовать библиотеку типа loda sh, которая обеспечивает функцию throttle .

0 голосов
/ 08 января 2020

Я прошел через подобное упражнение пару лет go.

В итоге я получил действительно крошечную реализацию: throttled-event-listener. js

Вот живая демонстрация , в которой используется это.

А вот несколько документов о том, как выглядит вызывающий код.

Надеюсь, это поможет!

...