$（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

回答

相关问题