jQuery 媒体查询 : Conditional function on certain device width (working on resize as well)

Question

我有一个流体网格布局。我需要一些列(不太必要 - 例如 Twitter 更新)在较小的分辨率下“隐藏”，并在单击其标题时“显示”。

这是我到目前为止所拥有的:

HTML

<div id="wrapper">

    <div class="toggle">
         <h2>Heading</h2>
         This content is visible always
    </div>

    <div class="toggle-small">
         <h2 class="toggle-small-heading">Heading</h2>
         <div class="toggle-small-content">
              This content is hidden on max-width 600px. You can reveal it by clicking the heading.
         </div>
    </div>

    <div class="toggle-small">
         <h2 class="toggle-small-heading">Heading</h2>
         <div class="toggle-small-content">
              This content is hidden on max-width 600px. You can reveal it by clicking the heading.
         </div>
    </div>

</div>

JQUERY

// D E F I N E   T H E   F U N C T I O N

function ToggleSmall () {
     // CONDITIONALS
    // Clickable heading
    var ToggleSmallVar = $('#wrapper').find('.toggle-small-heading');
    // Content to toggle
    var ToggleSmallCol = $('#wrapper').find('.toggle-small-content');
    // FUNCTION
    // Content to toggle - hide it to be shown on click
    $(ToggleSmallCol).addClass('none');
    // Toggle function
    $(ToggleSmallVar).click(function () {
        // Find col to toggle
        var ToggleSmallColTarget = $(this).closest('.toggle-small-section').find('.toggle-small-col'); 
                    // Toggle the DIV
        $(ToggleSmallColTarget).slideToggle('slow');
    });
}

// C A L L   T H E   F U N C T I O N

$(document).ready(function () {
if ($(window).width() < 681) {
    ToggleSmall();
}
});

它在加载时工作，但我尝试让它在窗口调整大小时也“响应式”工作:在小于 681 的分辨率上执行 ToggleSmall() 函数，并在更大的分辨率上停止它。

我尝试在“调整大小”事件(例如 jQuery as Media Queries on resize )上绑定(bind)该函数，但由于某种原因“切换”执行了 3-4 次(文档多次“准备好”？)。

我找到了一些其他解决方案 - 主要是定义一个变量 - 但到目前为止没有一个有效。我也是一个 jQuery 新手，所以也许我错过了一些东西。 :) 有什么想法吗？

Answer 1

有人建议使用“计时器”事件监听器来调节 javascript 的行为和处理

从 Curt Howard example 复制粘贴:

var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

$(function() {
    var pause = 100;
    // will only process code within delay(function() { ... }) every 100ms.

    $(window).resize(function() {
        delay(function() {
            var width = $(window).width();
            if( width >= 768 && width <= 959 ) {
                // code for tablet view
            } else if( width >= 480 && width <= 767 ) {
                // code for mobile landscape
            } else if( width <= 479 ) {
                // code for mobile portrait
            }
        }, pause );
    });

    $(window).resize();
});