CODEWITHSUNDEEP
javascriptfunctioneventssetintervaldebouncing
Sofia
Sofia

Reputation: 147

Why does this debounce and Interval not work?

var counter;
var count = 0;


window.onload = function() {


  document.getElementById('myid').addEventListener("click", debounce(e => {
    console.log('clicked');
    start(document.getElementById('myid').className, document.getElementById('myid').value);
  }, 200))

  /*
  x=document.getElementById('myid');
    
  x.onclick= debounce(function()
      {
      console.log(x.classname,x.value);
      start(x.className, x.value);          
      }, 200);
  */
}


const debounce = (fn, delay) => {
  let timeoutID;
  return function(...args) {
    if (timeoutID) {
      clearTimeout(timeoutID);
    }
    timeoutID = setTimeout(() => {
      fn(...args)
    }, delay);
  };
};


function start(clicked_className, Zeichen) {

  counter = setInterval(function() {
    add(clicked_className, Zeichen);
    count++;
  }, 370);
}

function end() {
  clearInterval(counter);
}

function add(clicked_className, Zeichen) {
  window.document.Rechner.Display.value =
    window.document.Rechner.Display.value + Zeichen;
}
<!DOCTYPE html>
<html onmouseup="end()">

<form name="Rechner">
  <button id="myid" class="zahlen" value=" 7 ">Click</button>

  <input type="text" name="Display" value=" 7 " class="display" readonly>
</form>

</html>

I have to do this for school but I edit and try but no matter what I do it seems to not work =/ It doesnt even give me any errors. Also tried the debounce and interval each in small scale and it worked... My problems started when trying to make debounce work with an actual function instead of an anonymous function with only console log in it. I cant even identify the problem

Upvotes: 0

Views: 272

Answers (1)

Argee
Argee

Reputation: 1224

From what you have described, I'd do something like this. However, I'm not sure, if that really is, what you are looking for. So if it isn't: please specify your needs.

const startButton = document.getElementById('start-button');
const stopButton = document.getElementById('stop-button');
const display = document.getElementById('display');


const firstDelay = 1000;
const intervalDelay = 200;

let interval;

function addValue() {
  display.value += `${startButton.value}`;
}

function stop() {
  if(interval) {
    clearInterval(interval);
  }
}

function start() {
  setTimeout(() => {
    interval = setInterval(addValue, intervalDelay);
  }, firstDelay);
}

startButton.addEventListener("click", start);
stopButton.addEventListener("click", stop);
<button id="start-button" value="7">Click</button>
<button id="stop-button">Stop</button>

<input type="text" id="display" value="7" class="display" readonly>

Upvotes: 1

Related Questions