Неэффективность кода Javascript

Question

Неэффективность кода Javascript

0

Поэтому я создаю веб-сайт и кнопки, которые находятся на стороне, которые я хочу накладывать друг на друга, когда они прокручиваются. мне удалось заставить это работать, но мой javascript-код очень длинный, и я не могу понять, как еще я буду делать это, если кто-либо еще имеет какой-либо способ сделать это, и можете ли вы привести пример здесь, и плохо предоставить ссылку к jsfiddle, если вы хотите увидеть, как это работает JSFIDDLE

    function overlap(){
    var b1 = document.getElementById("b1");  //gets all the button elements by id
    var b2 = document.getElementById("b2");
    var b3 = document.getElementById("b3");
    var b4 = document.getElementById("b4");
    var b5 = document.getElementById("b5");
    var b6 = document.getElementById("b6");
    var b7 = document.getElementById("b7");
    var b8 = document.getElementById("b8");
    var curY = window.pageYOffset            // gets the current scroll offset in pixels and stores it in curY

    if(curY > 160){                          //if scroll is more than 160 b2 becomes fixed at 20px off the top
        b2.style.position = "fixed"
        b2.style.top = "20px"
    }
    if(curY > 320){                          //if scroll is more than 320 b3 becomes fixed at 20px off the top
        b3.style.position = "fixed"
        b3.style.top = "20px"
    }
    if(curY > 480){                          //if scroll is more than 480 b3 becomes fixed at 20px off the top
        b4.style.position = "fixed"          //and so on until 1120 off the top to stack all the buttons on top of each other
        b4.style.top = "20px"
    }
    if(curY > 640){
        b5.style.position = "fixed"
        b5.style.top = "20px"
    }
    if(curY > 800){
        b6.style.position = "fixed"
        b6.style.top = "20px"
    }
    if(curY > 960){
        b7.style.position = "fixed"
        b7.style.top = "20px"
    }
    if(curY > 1120){
        b8.style.position = "fixed"
        b8.style.top = "20px"
    }



    if(curY < 160){                      //if scroll becomes less than 160 b2 becomes absolute at its original px of the top
        b2.style.position = "absolute"   //and so on until the original position of b8 is reset
        b2.style.top = "180px"
    }
    if(curY < 320){
        b3.style.position = "absolute"
        b3.style.top = "340px"
    }
    if(curY < 480){
        b4.style.position = "absolute"
        b4.style.top = "500px"
    }
    if(curY < 640){
        b5.style.position = "absolute"
        b5.style.top = "660px"
    }
    if(curY < 800){
        b6.style.position = "absolute"
        b6.style.top = "820px"
    }
    if(curY < 960){
        b7.style.position = "absolute"
        b7.style.top = "980px"
    }
    if(curY < 1120){
        b8.style.position = "absolute"
        b8.style.top = "1140px"
    }
}
window.addEventListener("scroll",overlap,false); //calls the function repeatedly as soon a the scroll changes

все те, если утверждения должны быть заменены чем-то, но я не могу понять, что? заранее спасибо

DomantasJ1 17 апр. 2014, в 01:02

Источник

1

Этот вопрос кажется более подходящим для codereview.stackexchange.com
elclanrs 16 апр. 2014, в 22:43

Теги:

javascript

html

performance

dom

1 ответ

Ещё вопросы

Этот вопрос кажется более подходящим для codereview.stackexchange.com

Zack Argyle · Accepted Answer · 2014-04-16T20-39-00.000Z

Как пробросить все это в цикле for и использовать индекс для сопоставления с тем, что вы хотите. Что-то вроде этого должно сделать трюк.

function overlap() {
    var curY = window.pageYOffset,
        offset = 160;
    for (var i = 1, i <= 8; i++) {
        var elem = document.getElementById("b" + i);
        if (curY > offset * i) {
            elem.style.position = "fixed";
            elem.style.top = "20px";
        } else {
            elem.style.position = "absolute";
            elem.style.top = offset * i + 20 + "px";
        }
    }
}

Или, если вы хотите, чтобы это было немного быстрее, не получайте элементы каждый раз. Может, что-то вроде этого?

var overlap = (function() {
    var elements = [
        document.getElementById("b1"),
        document.getElementById("b2"),
        document.getElementById("b3"),
        document.getElementById("b4"),
        document.getElementById("b5"),
        document.getElementById("b6"),
        document.getElementById("b7"),
        document.getElementById("b8")
    ];
    return function() {
        var offset = 160;
        for (var i = 1, i <= elements.length; i++) {
            var elem = elements[i-1];
            if (curY > offset * i) {
                elem.style.position = "fixed";
                elem.style.top = "20px";
            } else {
                elem.style.position = "absolute";
                elem.style.top = offset * i + 20 + "px";
            }
        }
    }
})();

Я проверяю это, но дело в том, что элемент b1 никогда не изменяется, но в вашем цикле он начинается с 1, поэтому после того, как я изменил его на 2, код, если (curY> offset * i) больше не верен, так как 2 равно 160 но теперь я получаю 320 как смещение 160, а затем * 2
Хорошо, так что я получил его, оставив остальную часть вашего кода, как это было, я взял 1, если оператор if, как и так (curY> offset * (i - 1)), а затем в операторе else тоже взял 1 от i, то я также сделал цикл запуска в 2, и все работает отлично. Спасибо !