Tips to enhance javascript code

Question

Was doing a nice-dropping navigation using css3 transforms. Also written some javascript for this purpose.

But unfortunately it looks a bit untidy. Would you guys please give me some tips to optimize javascript code.

The pen --> http://codepen.io/rokki_balboa/pen/doOqqv?editors=001

var bar = document.querySelector('.fa-bars');
var lis = document.getElementsByTagName('li');

    bar.onclick = function() {

            var delayIn = 0;
            var delayOut = 1500;
            if (!(lis[0].classList.contains('accordion'))) {
                    console.log(lis[5]);
                    [].forEach.call(lis, function(el) {
                            setTimeout(function() {
                                    el.classList.add('accordion');
                            }, delayOut);
                            delayOut -= 300;
                    });
            } else {
                    [].forEach.call(lis, function(el) {
                            setTimeout(function() {
                                    el.classList.remove('accordion');
                            }, delayIn);
                            delayIn += 300;
                    });
            }

    };

This question is very vague and the answer is going to be opinionated. What is it you're not happy with exactly, and what is your criteria for success? — Hannes Johansson
– Hannes Johansson, Commented Jul 6, 2015 at 15:22

Community · Accepted Answer · 2017-04-13 12:40:36Z

1

If you're simply looking to reduce duplication, this might help:

var bar = document.querySelector('.fa-bars');
var lis = document.getElementsByTagName('li');

bar.onclick = function() {
    var delay = {in: 0, out: 1500};
    var adding = !(lis[0].classList.contains('accordion'));
    [].forEach.call(lis, function(el) {
        setTimeout(function() {
            el.classList[adding ? 'add' : 'remove']('accordion');
        }, delay[adding ? 'out' : 'in']);
        delay[adding ? 'out' : 'in'] += (adding ? -300 : 300);
    });
};

But it does so at some expense in readability. You'd have to make the call for your codebase as to which seems more maintainable.

In the future, https://codereview.stackexchange.com/ is a good place for code review help.

edited Apr 13, 2017 at 12:40

CommunityBot

11 silver badge

answered Jul 6, 2015 at 15:33

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

devellopah Over a year ago

absolutely what i was looking for! Thanks a lot Scott!

Scott Sauyet Over a year ago

On a second look, there might be a little more clean-up that could be achieved. You don't really need the two-part delay, which could be moved down a line and defined as var delay = adding ? 1500 : 0, with the lines below simply using delay rather than delay[ ... ]. And if you added a delta variable initialized to adding ? -300 : 300, you could clean up that last line, leaving some pretty readable code.

Collectives™ on Stack Overflow

Tips to enhance javascript code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related