响应式JavaScript：尝试根据媒体查询触发功能

debugcn 发表于 Dev

弗拉基米尔

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

说函数A（）仅在（最小宽度：768像素）时被调用，函数B（）仅在（最大宽度：767px）时才能被调用。

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

如果页面被加载（最大宽度：767像素），然后将其大小调整为（最小宽度：768像素），则无法调用函数A（）。
如果我尝试在窗口调整大小时调用函数，则函数A（）会在单击时触发多次。

我尝试了不同的解决方案：

使用addListener
enquire.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
        });
    }
});

阿尔法

这应该工作：

$(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条件匹配，则运行代码，否则不运行代码。