Question

在开发具有非常特定设计细节的导航菜单时，我使用它来检查窗口大小并在所选元素后附加一些代码。

$(document).ready(function() {
// Optimalisation: Store the references outside the event handler:
var $window = $(window);

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize >= 768) {
        //if the window is greater than 440px wide then turn on jScrollPane..
        $('nav.dropdowns ul.patient>li:nth-child(4n+5)').after('<div class="clear"></div>');
    }
    else if (windowsize <= 767) {
        //if the window is greater than 440px wide then turn on jScrollPane..
        $('nav.dropdowns ul.patient>li:nth-child(3n+4)').after('<div class="clear"></div>');
    }
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});

问题是它一直在触发，它无休止地附加我的代码。我可以通过删除事件监听器轻松解决这个问题。这很好用的是一个窗口加载，因为它的最终大小。但就流体响应性而言，它失败了，因为事件只是首先在加载时而不是在此之后的任何时间。我已经查看了其他一千个脚本，但是没有办法阻止事件一次又一次地触发，我实际上可以开始工作。

Answer 1

如果你想要的不是过度激发这个功能，你可以使用setTimeout和clearTimeout。尝试这样的事情：

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize >= 768) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $('nav.dropdowns ul.patient>li:nth-child(4n+5)').after('<div class="clear"></div>');
        }
        else if (windowsize <= 767) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $('nav.dropdowns ul.patient>li:nth-child(3n+4)').after('<div class="clear"></div>');
        }
    }

    var timeoutId;
    function resizeEvent(){
        // 'reset' the timeout each fire
        clearTimeout(timeoutId);
        // save reference to the timeout delay in 'timeoutId'.  10ms delay
        timeoutId = setTimeout(checkWidth, 10);
    }

    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(resizeEvent);
});

这将不断触发resizeEvent()，但10ms延迟会阻止checkWidth()不断运行。

注意：这是您的问题的解决方案，但可能不是最佳解决方案。您应该在CSS

中尽可能多地考虑实现目标

仅在完成时检查调整大小

1 个答案: