Question

我现在对我的轮播和按钮使用CSS Media查询。但是为了使滚动动画正常工作，我需要Jquery。我遇到的问题是，如果我调整设备分辨率并返回桌面，那么执行3次意味着代码将运行3次。这样做了6次，它将运行代码6次。

Jquery的：

function setupButtons() {
    if ($(window).width() > 1198) {
        if ($('#carousel-a').is(':visible')) { // desktop
            $("#OnzeDiensten").click(function(a) {
                a.preventDefault();

                $('html, body').animate({
                    scrollTop: $("#OnzeDienstenHeading").offset().top - 80
                }, 2000);
                alert(" MAIN!");
            });

        }
    }
    if ($(window).width() < 992) { // device
        if ($('#carousel-d').is(':visible')) {
            $("#OnzeDienstenDevices").click(function(b) {
                b.preventDefault();
                $('html, body').animate({
                    scrollTop: $("#OnzeDienstenHeadingDevice").offset().top - 80
                }, 2000);
                alert("DEVICE!");
            });
        }
    }
    if ($(window).width() < 1198 && $(window).width() > 992) { // tablet
        if ($('#carousel-e').is(':visible')) {
            $("#OnzeDienstenResponsive").click(function(c) {
                c.preventDefault();
                $('html, body').animate({
                    scrollTop: $("#OnzeDienstenHeadingResponsive").offset().top - 80
                }, 2000);
                alert("RESPONSIVE!");
            });
        }
    }
}

function resizeAnimatedScreenButton() {
    var resizeTimeout;
    $(window).resize(function() {
            clearTimeout(resizeTimeout);
            if ($(window).width() > 1198) {
                resizeTimeout = setTimeout(function() {
                    if ($('#carousel-a').is(':visible')) { // desktop
                        $("#OnzeDiensten").click(function(a) {
                            a.preventDefault();
                            $('html, body').animate({
                                scrollTop: $("#OnzeDienstenHeading").offset().top - 80
                            }, 2000);
                            alert(" MAIN!");
                            $('#carousel-a').unbind();
                        });
                    }
                }, 500);
            }
            if ($(window).width() < 992) { // device
                resizeTimeout = setTimeout(function() {
                    if ($('#carousel-d').is(':visible')) {
                        $("#OnzeDienstenDevices").click(function(b) {
                            b.preventDefault();
                            $('html, body').animate({
                                scrollTop: $("#OnzeDienstenHeadingDevice").offset().top - 80
                            }, 2000);
                            alert("DEVICE!");
                            $('#carousel-d').unbind();
                        });
                    }
                }, 500);
            }
            if ($(window).width() < 1198 && $(window).width() > 992) { // tablet
                resizeTimeout = setTimeout(function() {
                    if ($('#carousel-e').is(':visible')) {
                        $("#OnzeDienstenResponsive").click(function(c) {
                            c.preventDefault();
                            $('html, body').animate({
                                scrollTop: $("#OnzeDienstenHeadingResponsive").offset().top - 80
                            }, 2000);
                            alert("RESPONSIVE!");
                            $('#carousel-e').unbind();
                        });
                    }
                }, 500);
            }
        });
} // end resizeanimation

$(document).ready(function() {
    setupButtons();
    resizeAnimatedScreenButton();
});

CSS媒体查询：

 @media (min-width:1198px)
   .carousele, .carouseld, .DienstResponsive, .DienstDevice {
   display:none!important;
}
 @media (max-width:1197px) and (min-width: 993px)
 .carousela, .carouseld, .DienstDesktop, .DienstDevice {
    display:none;
 }
 @media (max-width:992px)
 .carousele, .carousela, .DienstDesktop, .DienstDevice {
    display:none;
 }

Answer 1

问题是您在.click回调中附加了scroll侦听器：

$(window).resize(function() {
   $("#OnzeDiensten").click(function(a) { ... }
})

这意味着每次将窗口调整为1像素时，您都会附加一个单击侦听器。因此，如果您将窗口大小调整为100像素，则会附加100个侦听器（！）。单击该按钮时，代码将运行100次。

更糟糕的是，正如我在评论中已经说过的那样，你并没有缓存你的jQuery对象。因此，jQuery必须遍历整个DOM并在HUNDRED时间内查找$('#carousel-a')，$('html, body')，$("#OnzeDienstenDevices")，$("#OnzeDienstenHeadingDevice")和$('#carousel-d')中的每一个，并构建这么多jQuery每次对象几百次！这在表现方面非常可怕。

所以1. CACHE你的对象

var $OnzeDiensten = $("#OnzeDiensten");
// and then RE-USE them at will
$OnzeDiensten.click(...)
$OnzeDiensten.animate(...)
$OnzeDiensten.css(...)

和2.取消之前的点击监听器，然后重新附加它们：

$OnzeDiensten
    .off("click") // Remove any previous click listeners
    .on("click", function(){ // attaches ONE click listener
       // do stuff once
    })

JQuery .resize函数运行代码x次调整大小

1 个答案: