Как функция работает только один раз после того, как событие произошло? И как убрать функцию после того, как произошло другое событие

Question

Когда я уменьшаю ширину окна до 576, моя функция работает, я использую код для предотвращения многократного изменения размера.

Моя главная проблема заключается в том, что когда я уменьшаю значение больше 576, моя функция slideTotal работает столько раз, сколько сокращается.

Также, если я уменьшу его до числа выше 576, моя функция все еще работает, не останавливается.

Как функция может работать только один раз, пока я не уменьшусь до значения выше 576, и как я могу остановить функцию снова после ширины больше 576?

Я пробовал логическое значение, но функция не останавливается, она не работает с логическим значением.

var footerMenu = ['#about', '#help']

function slideDown(){
  footerMenu.forEach(function(list){
      $(list+' p').click(function(){
        $(list+' ul').slideToggle(300)
      })
    })
}

function slideClear(){
  for( let i = 0; i < footerMenu.length; i++){ 
    $(footerMenu[i]+' p').click(function(){
      var choice = footerMenu[i]
      footerMenu.splice(i, 1);
      footerMenu.forEach(function(list){ 
          $(list+' ul').slideUp(300)
      })
      footerMenu.splice(i, 0, choice);
    })
  }
}

function slideTotal(){

  slideDown()
  slideClear()

}

function resizeDone( ) {

  $vWidth = $(window).width();

  if($vWidth <576){
    console.log("Width: Less than 576");
    slideTotal()
    }else{
      console.log("Width: More than 576");
    }
}

$(document).ready(function() {

  var delta = 300;
  var timer = null;

  $(window).resize(function(){

    clearTimeout( timer );
    timer = setTimeout( resizeDone, delta );

  });
});

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

Answer 1

let flag = false;

if($vWidth <576){
    console.log("Width: Less than 576");
        if (!flag){
            slideTotal();
            flag = true;
        }
    }else{
      flag = false;
      console.log("Width: More than 576");
    }