Multiple timeouts triggered on css changes

I am building a website with functions for better accessibility. One of these functions changes the global font-size. I noticed, that this also shortened the delay of the slider interval dramaticly.

You can reproduce the issue on the contao demopage. Add another font-size to the body-tag with developer tools. Removing and adding it several times increases this effect.

https://demo.contao.org/

The problem is, that global changes on the webpage can cause an additional transition inside the slider. Every "transitionEnd"-Event calls the function "begin" which starts a new timeout.

I think clearing a running timeout in the "begin" function is one of the simplest solutions for this problem.

function begin() {

  if (interval != null) clearTimeout(interval);
  interval = setTimeout(function(){
    interval = null;
    next();
  }, delay);

}

It shouldnt be a problem to run clearTimeout multiple times on the same ID, so the function could also just look like this.

  function begin() {

    if (interval != null) clearTimeout(interval);
    interval = setTimeout(next, delay);

  }

contao-components / swipe

Multiple timeouts triggered on css changes #4