Question

我有两种不同的功能可以根据屏幕大小调用。我把它们称为就绪函数，如下所示：

$(document).ready(function() {
    var $window = $(window);
    var $window_width = $(window).width();

    if ($window_width < 768) {
        faq_mobile();
    } else {
        faq();
    }
});

但是我再次想要在窗口调整大小事件上调用它们，因为那时函数没有被调用。所以我写了这个：

$(window).bind('resize', function(e) {
    window.resizeEvt;
    $(window).resize(function() {
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function() {
            if ($(window).width() < 768) {
                faq_mobile();
            } else {
                faq();  
            }
        }, 250);
    });
});

但由于在调整窗口大小时多次调用faq和faq_mobile函数，因此无法正常工作。在这种情况下，最佳解决方案是什么？

Answer 1

您的代码看起来有点奇怪。考虑这个例子

var isMobileView = false;
var isDesktopView = false;

function handleView(width) {

    if (width < 768 && isDesktopView) {
    
        faq_mobile();
        isMobileView = true;
        isDesktopView = false;
        
    } else if (width >= 768 && isMobileView) {
    
        faq();
        isMobileView = false;
        isDesktopView = true;
        
    }
}

$(document).ready(function() {
  
  var width = $(window).width();
  handleView(width)
  
});

$(window).resize(function() {
  
  var width = $(window).width();
  handleView(width)

})

Answer 2

function handler() {        // separate the code and wrap it in a function
    var $window_width = $(window).width();

    if ($window_width < 768) {
        faq_mobile();
    } else {
        faq();
    }
}

$(handler);                 // on load of the document

$(window).resize(handler);  // on resize of the window

如果您想保持调整大小事件的延迟，请将上面的最后一行更改为：

$(window).resize(function() {
    window.clearTimeout(window.resizeEvt);     // remove previous delay if any
    window.resizeEvt = setTimeout(function() { // create a new delay
        handler();
        window.resizeEvt = 0;
    }, 250);
});

Answer 3

嗯..谢谢大家的帮助。我用Google搜索了一下，找到了解决方法。在调整大小完成后，我必须取消绑定在faq和faq_mobile函数内添加的事件。然后再次调用这些函数。这是修改后的代码:(感谢@disstruct的建议）。

$(document).ready(function() {
    var width = $(window).width();
    handleView(width);
});

$(window).bind('resize', function(e) {
    window.resizeEvt;
    $(window).resize(function() {
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function() {
            // here i am unbinding the click events which were previously added inside faq and faq_mobile functions.
            $('.faq-expand, .answer-close').off('click');
            var width = $(window).width();
            handleView(width);
        }, 250);
    });
});

function handleView(width) {
    if (width < 768) {
        faq_mobile();
    } else {
        faq();
    }
}

在窗口就绪和窗口调整大小时调用相同的函数

3 个答案: