Javascript 该函数如何仅在事件发生后工作一次？以及如何在另一个事件发生后删除该函数

当我将窗口宽度缩小到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 );

  });
});

var footerMenu=['#关于'，'#帮助']
函数slideDown（）{
footerMenu.forEach（函数（列表）{
$（列表+p'）。单击（函数（）{
$（列表+ul'）。滑动切换（300）
})
})
}
函数slideClear（）{
对于（设i=0；ilet flag=false；
如果（$vWidth
let flag=false；
如果（$vWidth做一个bool类型标志，除了屏幕分辨率检查@Бааааааааааааааааааааааааа107，但函数在收缩超过宽度576后仍能工作，我想我需要代码停止函数
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");
    }