marklovin's questions

No exemplo fornecido, a forma menor é animada muito mais rapidamente do que a forma maior porque o comprimento do traço é muito menor.

Meu entendimento é que definir stroke-dasharraycomo 100% em vez de uma quantidade de pixels deve conseguir isso, mas isso tem resultados inesperados onde o traço não estende 100% da forma.

.page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column-gap: 2em;
  grid-row-gap: 2em;
}

.radar-wrapper {
  width: 300px;
  height: 300px;
}

.shape {
  fill: #ff4040;
  fill-opacity: .4;
  stroke: #ff4040;
  stroke-width: 2;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  animation: draw 5s infinite linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<div class="page-wrapper">
  <div class="radar-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <polygon class="shape" points="116.67 3.97 155.96 123.88 243.39 32.89 174.14 138.38 299.79 150 174.14 161.62 243.39 267.11 155.96 176.12 116.67 296.03 133.3 170.95 15.05 214.99 123.21 150 15.05 85.01 133.3 129.05 116.67 3.975"></polygon>
</svg>
  </div>
  <div class="radar-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <polygon class="shape" points="144.04 176.12 133.3 170.95 125.86 161.62 123.21 150 125.86 138.38 133.3 129.05 144.04 123.88 155.96 123.88 166.7 129.05 174.14 138.38 176.79 150 174.14 161.62 166.7 170.95 155.96 176.12 144.04 176.12"></polygon>
</svg>
  </div>
</div>

Estou usando a função abaixo para vincular eventos de rolagem a um elemento deslizante, para acionar os slides seguintes/anteriores.

No entanto, em certas situações, gostaria de desabilitar essa função, nos casos em que os menus suspensos estão em foco, para permitir que o usuário role pela lista suspensa. E então, quando o elemento suspenso estiver fora de foco, gostaria de reativar minha função de rolagem. Como isso pode ser alcançado?

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

var onScroll = debounce(function(direction) {
  if (direction == false) {
    $(".slider-next").trigger('tap');
  } else {
    $(".slider-prev").trigger('tap');
  }
}, 100, true);

$('#slider').bind('wheel mousewheel', function(e) {
  e.preventDefault();
  var delta;
  if (typeof event != 'undefined' && event.wheelDelta) {
    delta = event.wheelDelta;
  } else {
    delta = -1 * e.originalEvent.deltaY;
  }
  onScroll(delta >= 0);
});