Как запустить оповещение только один раз в пределах диапазона в операторе if?

Question

function sendWeightAlert(){
 if(petInfo.weight >= 100 && previousWeight < 100){
  $(".treat-button").one("click", function(){
    alert(petInfo.name + " is going obese...");
  });
 }
}

Здесь я хочу показать предупреждение только один раз, когда значение petInfo.weight равно или превышает 100, и прекращать его каждый раз после нажатия кнопки treat-button.Я попытался найти ответ и попробовал все, что мог, но он не работает ... Пожалуйста, помогите мне хорошие мастера кода!

Answer 1

Я запускаю ваш код, и он фактически работает нормально - поэтому, вероятно, причина в том, что вы снова запускаете sendWeightAlert () после нажатия кнопки (которая снова связывает обработчик событий - и показывает предупреждениепосле следующего нажатия)

let previousWeight= 10;
let petInfo = { weight: 100, name: 'dog' };

function sendWeightAlert(){
 if(petInfo.weight >= 100 && previousWeight < 100){
  $(".treat-button").one("click", function(){
    alert(petInfo.name + " is going obese...");
  });
 }
}


sendWeightAlert();  // here we bind handler only once, and jQuery `one` will run it once.

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

<button class="treat-button">click me</button>

Answer 2

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

let showAlert = true;
$(".treat-button").click(function() {
  if ((petInfo.weight >= 100 && previousWeight < 100) && showAlert) {
    alert(petInfo.name + " is going obese...");
    showAlert = false;
  }
});

Answer 3

var alerted = false;

var previousWeight = 99

var petInfo = {
  weight: 101,
  name: 'petName'
}

$(".treat-button").one("click", function(){
  if(!alerted && petInfo.weight >= 100 && previousWeight < 100){
    alerted = true;
    alert(petInfo.name + " is going obese...");
  }
});

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div class="treat-button" style="width: 100px; height: 100px; background-color: red;">TREAT</div>

Answer 4

Как насчет объявления глобальной переменной по умолчанию true,

сделать ее ложной при выполнении оповещения.

и добавить ее в условие if.

var isAlertShown = true;

и ваша функция,

function sendWeightAlert(){
 if(petInfo.weight >= 100 && previousWeight < 100 && isAlertShown){
  $(".treat-button").one("click", function(){
    isALertShown = false;
    alert(petInfo.name + " is going obese...");
  });
 }
}