$（window）.resize中的函數問題 - 使用jQuery

我想使用一個簡單的函數在移動設備上隱藏/顯示內容只有。
函數本身非常簡單。我在這裏使用此代碼爲：

$('.toggleMobile').click(function() { 
     var hideableContent = $(this).parent().find('.hideable'); 
     hideableContent.slideToggle('medium'); 
    });

所以...沒有什麼特別的，我知道。

當我嘗試檢測瀏覽器視口時，它變得更加複雜。
我想我照顧了，通過使用以下行（你可能會想辦法改進它）：

function whatMedia() { 

     var viewport = $(window).width(); 
     var mediaType; 

     if (viewport < 767) 
      mediaType = 'mobile'; 
     else if ((viewport >= 767) && (viewport < 991)) 
      mediaType = 'tablet'; 
     else 
      mediaType = 'desktop'; 

     return mediaType; 
    }

現在我只是需要一個被觸發功能只有當視域是mobile（也許問題出在這裏？）：

function toggleMobile(mediaType) { 

     if (mediaType === 'mobile') { 
      $('.toggleMobile').click(function() { 
       var hideableContent = $(this).parent().find('.hideable'); 
       hideableContent.slideToggle('medium'); 
      }); 
     } 
    }

我沒有問題在第一次加載頁面時檢查視口。我只是用這個（代碼非常簡單位）：

// Check media type and activate accordingly 
    var mT = whatMedia(); 
    toggleMobile(mT);

到目前爲止好。現在來了有趣的部分：
我希望能夠檢測用戶是否調整瀏覽器窗口大小並相應地激活/禁用toggleMobile()函數。。

我可以這樣做：

$(window).resize(function() { 
     var mT = whatMedia(); 
     toggleMobile(mT); 
    }

正如你可能已經知道了，這$(window).resize事情讓WebKit和其他瀏覽器去有點瘋狂，只要用戶調整窗口重複的功能。
這取決於你對它的好壞。
我個人不希望這樣的事情發生，所以我用this function i found on the forums：

var waitForFinalEvent = (function() { 

     var timers = {}; 

     return function (callback, ms, uniqueId) { 
      if (!uniqueId) { 
       uniqueId = "Don't call this twice without a uniqueId"; 
     } 
      if (timers[uniqueId]) { 
       clearTimeout (timers[uniqueId]); 
      } 
      timers[uniqueId] = setTimeout(callback, ms); 
     } 

    })();

我的resize事件是這樣的：

$(window).resize(function() { 
     waitForFinalEvent(function() { 
      var mT = whatMedia(); 
      toggleMobile(mT); 
     }, 500, '1');   
    }

這肯定不會耽誤上調整瀏覽器窗口的計算但我不能使它內部的功能工作。
我不知道是什麼問題:(
釷功能被觸發兩次或更多次，甚至當視確認爲desktop或tablet。

來源

2011-08-30 el_carlismo

我想你應該看看[Modernizr]（http://www.modernizr.com/）。 – Pointy

每次調用'toggleMobile'時，都會添加另一個'click'事件處理程序（如果'mediaType'是'mobile'），而不刪除舊的。你應該只有一個事件處理程序，並檢查其中的'mediaType'。 – sje397

@Pointy我沒有意識到Modernizr的這個特性。肯定會檢查出來。 –

在togglemobile功能，您只需註冊點擊事件，但沒有別的，如果要觸發它，你可以做

$('.toggleMobile').click(function() { 
     var hideableContent = $(this).parent().find('.hideable'); 
     hideableContent.slideToggle('medium'); 
    }).trigger('click');

這將觸發click事件和運行代碼，或者你可以隱藏元素，而不是馬上。

ED IT：我會稍微修改一下我的答案。首先，我們註冊了點擊事件，雖然的slideToggle內容元素：

$('.toggleMobile').click(function() { 
     if(whatMedia() === "mobile") { 
      var hideableContent = $(this).parent().find('.hideable'); 
      hideableContent.slideToggle('medium'); 
     } 
    });

然後在toggleMobile(mt);功能，我們現在隱藏的內容，如果大小去到移動媒體

function toggleMobile(mediaType) { 

    if (mediaType === 'mobile') { 
     var hideableContent = $(".toggleMobile").parent().find('.hideable'); 
     hideableContent.slideToggle('medium'); 
    } 
}

這是如果我明白，你想要什麼？

我看到這可能是@ sje397的意思。

來源

2011-08-30 03:45:10 Joakim

Hi @Joakim。謝謝您的回答。我不確定我瞭解你。該函數總是被觸發。實際上它會被觸發的次數超過我需要的次數。我嘗試添加您建議的內容，這使得它觸發了更多次。有什麼想法爲什麼？ –

@el_carlismo看看我編輯的答案。 – Joakim

這可能是@ sje397意味着什麼......我會嘗試你的方法，並讓你的頭在上面:) –

$（window）.resize中的函數問題 - 使用jQuery

回答

相關問題