JavaScript Maximalwert setzen und schneller Value-Wechsel?

3 Antworten

MrAmazing2
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, programmieren
13.02.2022, 15:50

Eine alternative Lösung zu der von TechPech wäre mit Math.min() und Math.max()

let a = 1;
const max = 10;
const min = 1;

plus.addEventListener("click", ()=>{
  a = Math.min(a+1, max);
  a = (a < 10) ? "0" + a : a;
  num.innerText = a;
});
minus.addEventListener("click", ()=>{
  a = Math.max(a-1, min);
  a = (a < 10) ? "0" + a : a;
  num.innerText = a;
});

Dein Code hat momentan sehr viel doppelt, man könnte ihn so verkürzen:

let a = 1;
const max = 10;
const min = 1;

plus.addEventListener("click", ()=>changeValue(+1));
minus.addEventListener("click", ()=>changeValue(-1));

function changeValue(change) {
  a = Math.min( Math.max( a+change, min ), max);
  num.innerText = (a < 10) ? "0" + a : a;
}
Außerdem möchte ich gerne wenn man + bzw. - gedrückt hält den Value schneller wechseln kann. Wie ist das möglich?

Indem du anstatt des click-Event-Listeners einen mousedown- und mouseup-Listener machst, und darin einen Loop startest.

let loop;
plus.addEventListener("mousedown", () => {updateValue(+1); loop = setInterval( () => updateValue(+1), 200)} );
minus.addEventListener("mousedown", () => {updateValue(-1); loop = setInterval( () => updateValue(-1), 200)} );
document.addEventListener("mouseup", () => clearInterval(loop));

Fiddle: https://jsfiddle.net/1mso94br/
Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf
TechPech1984
Nutzer, der sehr aktiv auf gutefrage ist
im Thema Computer
13.02.2022, 15:44

  https://jsfiddle.net/aed5wyhL/



let max = 10;

  plus.addEventListener("click", ()=>{
  if(a < max){

    a++;

    a = (a < 10) ? "0" + a : a;

    num.innerText = a;
  }
  });
Außerdem möchte ich gerne wenn man + bzw. - gedrückt hält den Value schneller wechseln kann. Wie ist das möglich?

verstehe ich nicht, was ist schneller ?
MrAmazing2  13.02.2022, 15:55

Ich denke das "schneller" ist ein bisschen irreführend, er meint einfach, dass das Adden/Subtrahieren dann generell in Dauerschleife ausgeführt werden soll.

TechPech1984  13.02.2022, 16:34
@MrAmazing2

so hab den effekt mal so gebaut wie er so ungefähr sich das vorstellt , allerdings nicht dynamisch :) das soll wer anders machen :)
TechPech1984
Nutzer, der sehr aktiv auf gutefrage ist
im Thema Computer
13.02.2022, 16:33

Der Schneller werden effekt mit verzögerung nach 1 sekunde

https://jsfiddle.net/aed5wyhL/3/

var pressTimer;
var counting;
plus.addEventListener("mouseup",()=>{
 clearTimeout(counting);
 clearTimeout(pressTimer);

 // Clear timeout
 return false;
});
plus.addEventListener("mousedown",()=>{
 // Set timeout
 pressTimer = window.setTimeout(function() {
   counting = window.setInterval(function() {
    if(a < max){

      a++;

      a = (a < 10) ? "0" + a : a;

      num.innerText = a;
    }  
   },100);
 },1000);
 return false; 
});

minus.addEventListener("mouseup",()=>{
 clearTimeout(counting);
  clearTimeout(pressTimer);
 
  // Clear timeout
  return false;
});
minus.addEventListener("mousedown",()=>{
  // Set timeout
  pressTimer = window.setTimeout(function() {
    counting = window.setInterval(function() {
     if(a > 1){

       a--;

       a = (a < 10) ? "0" + a : a;

       num.innerText = a;

     }
    },100);
  },1000);
  return false;
});
MrAmazing2  13.02.2022, 16:41

Der mouseup-Listener sollte übrigens immer auf document bzw. window gemacht werden!

Wenn ich nämlich bei deiner Version einen Knopf drücke, und Linksklick dann ausserhalb des Fensters wieder loslasse, dann buggt es.
MrAmazing2  13.02.2022, 16:37

So wollt ichs auch erst machen, aber dann is mir aufgefallen es geht viel kürzer

let loop;
plus.addEventListener("mousedown", () => {updateValue(+1); loop = setInterval( () => updateValue(+1), 200)} );
minus.addEventListener("mousedown", () => {updateValue(-1); loop = setInterval( () => updateValue(-1), 200)} );
document.addEventListener("mouseup", () => clearInterval(loop));
TechPech1984  13.02.2022, 16:44
@MrAmazing2

danke , ich denk so sollte der fragende didaktisch schritt für schritt zur effizienten lösung kommen .