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

根据屏幕的大小，我有两个不同的函数可以调用。我在ready函数中调用它们，如下所示：

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

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

$（文档）.ready（函数（）{
变量$window=$（window）；
var$window_width=$（window.width（）；
如果（$window_width<768）{
常见问题解答（手机）；
}否则{
常见问题解答（）；
}
});

但我还是想在窗口调整大小事件中调用它们，因为当时没有调用函数。所以我写了这个：

$(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);
    });
});

$（窗口）.bind（'resize'，函数（e）{
window.resizevt；
$（窗口）。调整大小（函数（）{
clearTimeout（window.resizevt）；
window.resizevt=setTimeout（函数（）{
如果（$（窗口）.width（）<768）{
常见问题解答（手机）；
}否则{
常见问题解答（）；
}
}, 250);
});
});

---

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

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

var isMobileView=false；
var isDesktopView=false；
功能手柄视图（宽度）{
if（宽度<768&&isDesktopView）{
常见问题解答（手机）；
isMobileView=真；
isDesktopView=false；
}else if（宽度>=768&&isMobileView）{
常见问题解答（）；
isMobileView=假；
isDesktopView=true；
}
}
$（文档）.ready（函数（）{
变量宽度=$（窗口）.width（）；
扶手视图（宽度）
});
$（窗口）。调整大小（函数（）{
变量宽度=$（窗口）.width（）；
扶手视图（宽度）
})

好吧。。谢谢大家的帮助。我在谷歌上搜索了一下，找到了一个补丁。在调整大小后，我必须解除添加到faq和faq_移动功能中的事件的绑定。然后再次调用这些函数。这是修改后的代码：（谢谢@disstruct的建议）

$（文档）.ready（函数（）{
变量宽度=$（窗口）.width（）；
handleView（宽度）；
});
$（窗口）.bind（'resize'，函数（e）{
window.resizevt；
$（窗口）。调整大小（函数（）{
clearTimeout（window.resizevt）；
window.resizevt=setTimeout（函数（）{
//在这里，我解除了以前添加到faq和faq_移动功能中的点击事件的绑定。
$（'.faq展开，.answer关闭'）.off（'click'）；
变量宽度=$（窗口）.width（）；
handleView（宽度）；
}, 250);
});
});
功能手柄视图（宽度）{
如果（宽度<768）{
常见问题解答（手机）；
}否则{
常见问题解答（）；
}
}

最好像当前一样进行去盎司

if（window.resizeEvt）{clearTimeout（window.resizeEvt）；}

您应该将其包装在条件中，否则它将抛出错误。检查控制台日志。只需将代码放在一个单独的函数中，然后将该函数设置为resize事件处理程序和ready事件处理程序！是的，代码有点乱。谢谢你提到那件事。但是你的解决方案并不能解决我的问题。我第一次不理解这个问题。我已经编辑了我的答案。这应该行得通

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);
});

$(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();
    }
}