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.

2
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 :)

1
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.

1
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));
1
TechPech1984  13.02.2022, 16:44
@MrAmazing2

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

1