如何啓用/禁用（實時）網頁上的JavaScript插件？

Question

我需要實時啓用/禁用.js插件。當用戶重新調整他的瀏覽器窗口大小時，桌面版本變爲移動版。事情是我需要禁用一些JavaScript（fullpage.js）並添加一些CSS。 如果您重新加載頁面或在電腦上使用全屏窗口，從頭到尾都沒有問題。問題是：如何禁用寬度爲< 800的fullpage.js？ 我已經試過這件事情：

添加此功能體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來自：

響應：（默認爲0）正常滾動（自動滾動：假）將在像素定義的寬度下使用。如果用戶想將它用於自己的響應式CSS，則會將類fp-responsive添加到插件的容器中。例如，如果設置爲900，則每當瀏覽器的寬度小於900時，插件將像正常站點一樣滾動。

在fullPage.js正常滾動將保留部分height以及分配給菜單的事件，或控制箭頭的水平滑塊，但它會作爲任何網站正常滾動。您可以看到該模式的演示here。

無論如何，如果你真的想銷燬fullPage。js出於任何原因，您需要使用提供的方法。 從文檔：

$ .fn.fullpage.destroy（類型）

銷燬插件事件和optinally它的HTML標記和樣式。使用AJAX加載內容時的理想選擇。 （）

類型：可以'空'或'全部'。如果全部通過，那麼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');