jQuery window.resize（）中的错误？

Question

我正在尝试创建一个网站，所以每当您单击id="slider-toggle"按钮时，菜单就会打开。 第一次加载页面时，它可以正常工作。

每当您调整窗口大小时，就会发生此问题。 每当您调整窗口大小然后单击按钮时，控制台日志都会显示“打开它，然后关闭它”。 而它只能说“打开”或“关闭”。

然后，每当您继续调整窗口大小然后单击按钮时，它都会显示类似“打开，关闭，打开，关闭，打开，关闭等等”的信息。

就我而言，jQuery的resize（）方法出了点问题。

还是有人可以看到我代码中的任何缺陷？

var container = $('#container');
var menu = $('#desktop-menu');

function myswipemenu(){

  //toggle function
  function toggleSwipeMenu(){
    if(container.hasClass("open")){
      console.log("close it");
    }
    else {
      console.log("open it");
    }
  }

  $('#slider-toggle').click(toggleSwipeMenu);

}
function callback () {
  windowsize = $(window).width();

    menu.removeClass('slidermenu');
    container.removeClass('thecontent');
    menu.insertAfter($(".header-main"));


  if (windowsize < 1160) {

    menu.addClass('slidermenu');
    container.addClass('thecontent');

    myswipemenu();
  }
  else {

    menu.removeClass('slidermenu');
    container.removeClass('thecontent');
  }
}

$(window).ready(callback);
$(window).on('resize', callback);

Answer 1

您正在resize事件中调用以下函数。

myswipemenu()

这些事件一次又一次地被束缚。

在调整大小事件中删除对该函数的调用，它将不会一次又一次地被调用。 如果要通过拖动窗口来调整大小，则该函数将被多次调用，并使浏览器超载。