Improving the performance when highlighting the current dot a little bit

[hebrerillo]

No description provided.

[zoltantothcom]

@hebrerillo Thanks for the PR! Are you sure it improves the performance though? Running the check on every step seems to add operations. What I mean - imagine you have 5 images in the carousel, then there will be a check for every of them before acting, so the operations will look like:

1. compare index on dot 1
2. add or remove class to dot 1
3. compare index on dot 2
4. add or remove class to dot 2
5. compare index on dot 3
6. add or remove class to dot 3
7. compare index on dot 4
8. add or remove class to dot 4
9. compare index on dot 5
10. add or remove class to dot 5

while the initial cycle will be just 6 steps

1. remove class from dot 1
2. remove class from dot 2
3. remove class from dot 3
4. remove class from dot 4
5. remove class from dot 5
6. add class to current dot

[hebrerillo]

Hello @zoltantothcom !

Maybe I am wrong, but the ten instructions in my cycle are constant.

However, in your initial cycle of six instructions, the sixth instruction:

element.querySelectorAll('.' + crslDotsClass + ' li')[current].classList.add('is-active');

Is not constant at all. I mean, 'querySelectorAll' means accessing the DOM to get all children of 'element', which will be much more expensive than more comparisons.

My idea was to remove that 'querySelectorAll' on line '140', and take advantage of the loop on line 136 to add the 'is-active' class. That is, to not query for all the children of 'element' twice.

But as I said, maybe I am wrong and I am just adding unnecessary complexity.

By the way, thank you very much for your response! I just came across your repository and found it very interesting.