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

Question

我需要实时启用/禁用.js插件。 当用户调整浏览器窗口大小时，台式机版本变为移动版。 问题是我需要禁用一些javascript（ fullpage.js ）并添加一些CSS。 从头到尾重新加载页面或在PC上使用全屏窗口都没有问题。 问题是：如何禁用宽度小于800的fullpage.js？ 我已经尝试过这些东西：

将此函数添加到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. 节流
2. 如何禁用/启用插件？
3. 启用/禁用JavaScript代码
4. 如何禁用/启用插件？
5. 动态启用和禁用jquery旋钮
6. 禁用和启用jQuery上下文菜单
7. 还有很多。

没什么关于实时的，也没有什么有趣/无助的。

您有什么建议吗？ 也许我不需要这样走吗？

Answer 1

您是否尝试过fullPage.js的responsive选项？ 不知道这是您想要的还是真的需要完全破坏fullPage.js。

从fullPage.js文档中 ：

响应：（默认值0）将在定义的宽度（以像素为单位）下使用正常滚动（autoScrolling：false）。 如果用户希望将fp响应类用于其自己的响应CSS，则将其添加到插件的容器中。 例如，如果设置为900，则每当浏览器的宽度小于900时，插件就会像正常站点一样滚动。

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

无论如何，如果您确实出于任何原因想要破坏fullPage.js，则需要使用提供的方法。 从文档：

$ .fn.fullpage.destroy（类型）

销毁插件事件，并销毁其HTML标记和样式。 使用AJAX加载内容时的理想选择。 （）

类型：可以为'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');