javascript - 响应式 JavaScript : Attempts to Fire Functions based on Media Queries

Question

第三天，我尝试用 JavaScript 实现媒体查询。

说函数 A() 只能在 (min-width: 768px) 时被调用，只有在 (max-width: 767px) 时才能调用函数 B()。

这可以通过使用 MediaQueryList 对象轻松实现。但是浏览器调整大小会出现问题。

1. 如果页面已加载，则无法调用函数 A()(最大宽度:767 像素)，然后调整为(最小宽度:768 像素)。
2. 如果我尝试在调整窗口大小时调用函数，则函数 A() 会在单击时多次触发。

我尝试过不同的解决方案:

• 使用 addListener
• 查询.js
• setTimeout/clearTimeout — http://go.shr.lc/1kGNpM6

等等

但显然我的 JavaScript 知识不足以写东西。请帮忙

    // Attempt #1  -----------------------------------------------------------------

function responsiveFunction(){
    if(window.matchMedia('(max-width: 767px)').matches) {
        $('.btn').click(function(event) {
            // Knock knock
        });
    }
}

$(function(){
    responsiveFunction();
});

$(window).resize(function(){
    responsiveFunction();
});

// Attempt #2  -----------------------------------------------------------------

function responsiveFunction(mql) {
    if (mql.matches) {
        $('.btn').click(function(event) {
            // Knock knock
        });
    }
}
 
var mql = window.matchMedia('min-width: 768px'); // MQL for MediaQueryList object
 
mql.addListener(responsiveFunction); // Execute responsive function on resize
 
responsiveFunction(mql); // Execute responsive function on load

// Attempt #3  -----------------------------------------------------------------
var smartResize = (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);
    };
})();


function responsiveFunction() {
    if (window.matchMedia('(min-width: 768px)').matches) {
        $('.btn').click(function(event) {
            // Knock knock
        });
    }
}

// Execute responsive function on load
responsiveFunction();

// Execute responsive function on resize
$(window).resize(function() {
    smartResize(function() {
        responsiveFunction();
    }, 500, 'myUniqueId');
});

// Attempt #4 w enquire.min.js ---------------------------------------------

enquire.register('(min-width: 768px)', {
    match: function() {
        $('.btn').click(function(event) {
            // Knock knock
        });
    }
});

Answer 1

这应该有效:

$(function(){
    $('.btn').on('click', function(event) {
        if(window.matchMedia('(max-width: 767px)').matches) {
            // Only run the code if media query matches
        }
    });
});

注册 click 处理程序而不检查 max-width 并在运行代码之前检查 width，如果 width 条件匹配则运行代码，否则不运行代码。