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");
    }

该功能如何仅在事件发生一次后起作用？以及如何在另一个事件发生后删除该功能

1 个答案: