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

ProgramBox

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

Post author:admin
Запись опубликована:5 января, 2022
Post category:Вопросы по программированию

#javascript #html

Вопрос:

Я создал простую систему монет с помощью JavaScript. И чтобы сделать обновления, я сделал кнопку, которая включается, когда ей больше 10. Чтобы сделать это навсегда, я запускаю эту функцию каждую миллисекунду с помощью этого:

 window.setInterval(function(){  // My code is here }, 1);

В любом случае, есть ли более чистый способ запустить эту систему без запуска функции каждую миллисекунду? Похоже, это не чистый код

Вот код, который я сделал для системы монет:

 var numberCounter = 0; var number = document.getElementById("number");  function plusOne() {  numberCounter  ;  number.innerHTML = numberCounter; }  function minusOne() {  numberCounter--;  number.innerHTML = numberCounter; }   /* Disable Buttons when below 10 */  window.setInterval(function(){ if(number.innerHTML lt;=9){  document.getElementById("enableMe").disabled = true; } else {  document.getElementById("enableMe").disabled = false; } }, 1);

 lt;button onclick="plusOne();"gt; 1lt;/buttongt; lt;button onclick="minusOne();"gt;-1lt;/buttongt; lt;p id="number"gt;0lt;/pgt;  lt;button id="enableMe"gt;Enabled when 10 or overlt;/buttongt;

Заранее спасибо!

1. Да, просто сделайте обновление, когда внесете изменения.

2. Просто измените состояние по щелчку мыши?

3. Кроме того, вы кэшируете number , что является хорошей идеей, но поскольку вы проходите DOM тысячу раз в секунду, чтобы найти кнопку, также было бы неплохо кэшировать enableMe

4. @Кит, и как я могу это сделать?

Ответ №1:

Просто сделайте функцию обновления по щелчку мыши. Нет необходимости непрерывно запускать функцию тысячу раз в секунду. Также начните с отключенной кнопки (так как счетчик начинается с 0).

 var numberCounter = 0; var number = document.getElementById("number");  function plusOne() {  numberCounter  ;  number.innerHTML = numberCounter;  updateButton(); }  function minusOne() {  numberCounter--;  number.innerHTML = numberCounter;  updateButton(); }  function updateButton() {  enableMe.disabled = ( number.innerHTML lt; 10) }

 lt;button onclick="plusOne();"gt; 1lt;/buttongt; lt;button onclick="minusOne();"gt;-1lt;/buttongt; lt;p id="number"gt;0lt;/pgt;  lt;button id="enableMe" disabledgt;Enabled when 10 or overlt;/buttongt;

На самом деле, немного оптимизировав, он может быть даже однострочным!

 const change = amount =gt; enableMe.disabled = (number.innerHTML =  number.innerHTML   amount) lt; 10;

 lt;button onclick="change(1)"gt; 1lt;/buttongt; lt;button onclick="change(-1)"gt;-1lt;/buttongt; lt;p id="number"gt;0lt;/pgt;  lt;button id="enableMe" disabledgt;Enabled when 10 or overlt;/buttongt;

1. Привет, Джереми, большое тебе спасибо, это идеально 🙂

2. Не беспокойтесь! Я даже нашел способ сократить свои три строки кода до одной 🙂

3. Привет, Джереми, извините за беспокойство, но как я могу добавить кнопку умножения? Мне жаль, что я новичок в JavaScript

4. Ну что ж, попробуй. Попробуйте, и если вы застряли, Stackoverflow здесь, чтобы помочь. Однако мы не должны писать ваш код или разрабатывать ваше приложение для вас. Вы должны что-то попробовать, показать свою попытку (как вы очень хорошо сделали со своим первоначальным вопросом выше). Если вы застряли с умножением, вам придется создать новый вопрос. Удачи 🙂

5. Хорошо, спасибо, извините

Ответ №2:

1) Просто создайте функцию enableButton , как показано ниже, и вызовите ее после нажатия обеих 1 -1 кнопок и

 function enableButton() {  if (number.innerHTML lt;= 9) {  document.getElementById("enableMe").disabled = true;  } else {  document.getElementById("enableMe").disabled = false;  } };

или

 function enableButton() {  document.getElementById("enableMe").disabled = number.innerHTML lt;= 9; };

2) Вы также должны обработать дело в первый раз, прежде чем нажимать какой-либо бот, затем вы просто вызываете enableButton функцию.

 var numberCounter = 0; var number = document.getElementById("number");  function plusOne() {  numberCounter  ;  number.innerHTML = numberCounter;  enableButton() }  function minusOne() {  numberCounter--;  number.innerHTML = numberCounter;  enableButton() }  enableButton();  function enableButton() {  if (number.innerHTML lt;= 9) {  document.getElementById("enableMe").disabled = true;  } else {  document.getElementById("enableMe").disabled = false;  } };

 lt;button onclick="plusOne();"gt; 1lt;/buttongt; lt;button onclick="minusOne();"gt;-1lt;/buttongt; lt;p id="number"gt;0lt;/pgt;  lt;button id="enableMe"gt;Enabled when 10 or overlt;/buttongt;