Как выполнить функцию один раз?

Question

Как вызвать функцию только один раз при вводе данных в инпуте? например раз в секунду при вводе в поле?

Сейчас через 1 сек вызывается столько раз, сколько символов

containerSelect.on("input", '#prop-container__out .input-data', async function() {
    let currency = $('#exchange-out .currentUnit').text()
    let inputName = $(this).attr('name')
    let value = $(this).val()
    timeouts[inputName] = null

    return new Promise(resolve => {
      clearTimeout(timeouts[inputName])
        timeouts[inputName] = setTimeout(function() {
          verifyProp(currency, inputName, value)
        }, 1000)
    })
  })
})

Answer 1

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

function debounce(f, ms) {
 let isCooldown = false
  return function() {
    if (isCooldown) return false; // пропуск
    f.apply(this, arguments);
    isCooldown = true;
    setTimeout(() => isCooldown = false, ms);
    return true; // изменения отработали
  }
}

// функция которую нужно выполнять не чаще одной секунды
const update = debounce(()=> {
  const value = $('input').val()
  $('p').text(value)
}, 1000)
    
$('input').on("input", function() {
  const isApplied = update() // обработчик
  // для того чтобы отловить последние нажатия
  if (!isApplied) setTimeout(update, 1000)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text">
<p></p>

БЛОГ НА HUSL

Как выполнить функцию один раз?

Ответы (1 шт):