如何启用/禁用（实时）网页上的 javascript 插件？

Question

我需要实时启用/禁用 .js 插件。当用户重新调整他的浏览器窗口大小时，桌面版变为移动版。问题是我需要禁用一些 javascript (fullpage.js) 并添加一些 css。 如果您从头到尾重新加载页面或在 PC 上使用全屏窗口，则没有问题。问题是：如何在宽度

将此函数添加到body onresize 事件（不重新加载没有结果）：

 function checkWidth() {
        if($(window).width() <= 760 ){
            $('#menu-header-button').click(function(){
                $('#navigation').toggleClass('navbar-v');  
                $('#logo-mobile').toggleClass('visible');
                $('#menu-header-button').addClass('disabled');
                 setTimeout(function(){ 
                    $('#menu-header-button').removeClass('disabled');  
                 }, 500);
            });
        } else if($(window).width() > 760 ){
          $('#fullpage').fullpage({
              menu: '#menu',
              anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
              css3: true,
              afterLoad: function(anchorLink, index){
              if( anchorLink == 'firstPage'){
                   $('#navigation').removeClass('navbar-v'); 
              }
          },
              onLeave: function(index, nextIndex, direction){
              setTimeout(function(){ 
                    $('#navigation').addClass('navbar-v'); 
              }, 500); 
              }
            });
        }

}

这只是有时有效：

$(window).onresize= checkWidth();
function checkWidth() {
                    if($(window).width() == 761 ){
                        location.reload(true);
                    }
                    //...
}

这根本不起作用：

   $(window).onresize= checkWidth();
    function delayCheckWidth(){
      setTimeout(function(){ 
                              checkWidth(); 
                           }, 50); //I thought some delay time can be useful here 
    }
    function checkWidth() {
                        if($(window).width() == 761 ){
                            location.reload(true);
                        }
                        //...
    }

我查看的相关主题：

1. Throttling
2. How to disable / Enable plugins?
3. Enable / Disable JavaScript code
4. How to disable / Enable plugins?
5. Enable and disable jquery knob dynamically
6. Disable and enable jQuery context menu
7. 还有很多其他的。

与实时无关，也没有什么有趣/有用的。

你有什么建议吗？也许我不需要这样做？

Answer 1

您是否尝试过 fullPage.js 的 responsive 选项？ 不确定这是您想要的还是您真的需要完全销毁 fullPage.js。

来自fullPage.js documentation：

responsive:（默认 0）将在定义的像素宽度下使用普通滚动 (autoScrolling:false)。一个类 fp-responsive 被添加到插件的容器中，以防用户想要将它用于他自己的响应式 CSS。例如，如果设置为 900，只要浏览器的宽度小于 900，插件就会像普通网站一样滚动。

fullPage.js 中的正常滚动将保留部分height 以及分配给菜单的事件或水平滑块的控制箭头，但它会像任何网站一样正常滚动。您可以查看该模式的演示 here。

在任何情况下，如果您真的想出于任何原因销毁 fullPage.js，您需要使用提供的方法。 来自文档：

$.fn.fullpage.destroy(type)

销毁插件事件和可选的 HTML 标记和样式。非常适合在使用 AJAX 加载内容时使用。 ()

type: 可以是 'empty' 或 'all'。如果全部通过，fullpage.js 使用的 HTML 标记和样式将被删除。这样，原始 HTML 标记，即在进行任何插件修改之前使用的标记，将被保留。

//destroy any plugin event (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();

//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');