функция щелчка в кнопке выполняется несколько раз

#javascript #php #html

#javascript #php #HTML

Вопрос:

Внутри цикла while выполняются все данные пользователя, когда я нажимаю на кнопку, идентификатор пользователя передается функции, которая находится вне цикла while. И проблема в том, что когда я нажимаю на кнопку, значение должно передаваться каждые 10 или 5 секунд, но в приведенном ниже коде, когда я нажимаю в первый раз, оно выполняется отлично, но когда я нажимаю во второй или третий раз, значение его выполнения первое, второе, третье и так далее .., Если я допустил какую-либо ошибку, исправьте меня или еще какую-нибудь логику??

 <?php
include("database/connect.php");

$q = mysqli_query($con, "select * from tbl_user");
while ($f = mysqli_fetch_array($q)) { ?>
    <input type="button" name="ch" value="<?= $f['id'] ?>" onclick="fcc(<?= $f['id']?>)"/><br>
<?php } ?>

<script>
function fcc(cc) {
   setInterval(function() {
       alert(cc);
   }, 3000);

}
</script>

1. 3000 — это 3 секунды?

2. setInterval выполняет этот код каждые 3 секунды до бесконечности в первый раз, второй раз и n раз, когда вы нажимаете.

3. Каждый раз, когда вы нажимаете, вы запускаете другое повторяющееся предупреждение, но вы не останавливаете старое.

4. да, почему вы использовали setInterval здесь

5. @Barmar как остановить старый, можете ли вы, пожалуйста, помочь

Ответ №1:

Назначьте таймер интервала глобальной переменной и остановите старый таймер при запуске нового.

 var timer;
function fcc(cc) {
    clearInterval(timer);
    timer = setInterval(function() {
        alert(cc);
    }, 3000);
}

Ответ №2:

Вы должны очистить интервал перед запуском нового

ES6:

 {
  let interval;
  function fcc(cc) {
    clearInterval(interval);
    interval = setInterval(fcc.callback.bind({}, [cc]), 1000);
  }
  window.fcc = fcc;
}

fcc.callback = function myAlert(m) {
  console.log(m)
}

 <input type="button" name="ch" value="a" onclick="fcc('a')" /><br>
<input type="button" name="ch" value="b" onclick="fcc('b')" /><br>
<input type="button" name="ch" value="c" onclick="fcc('c')" /><br>

Или с ES5

 function _fcc() {
  var interval;
  
  return function (m) {
    clearInterval(interval)
    interval = setInterval(fcc.callback.bind({}, [m]), 1000);
  }
}
fcc = _fcc();

fcc.callback = function myAlert(m) {
  console.log(m)
}

 <input type="button" name="ch" value="a" onclick="fcc('a')" /><br>
<input type="button" name="ch" value="b" onclick="fcc('b')" /><br>
<input type="button" name="ch" value="c" onclick="fcc('c')" /><br>