Как использовать поля JavaScript в сочетании с массивом вместо повторяющейся функции? - PullRequest
0 голосов
/ 07 февраля 2019

У меня есть следующий Javascript (чистый):

const style = document.documentElement.style;

**var ranges = {
    'tx': [-15, 15, 0], // key = css style property, first value = start range random, second value = end range random, third value = initial vlaue to return to
    'ty': [-5, 5, 0],
    'scale': [0.5, 1.5, 1],
    'opacity': [0.5, 0.9, 0]
};**

function valueChange(prop, value, initial) {
  style.setProperty('--' + prop, value);
  setTimeout ( function() {
    style.setProperty('--' + prop, initial);
  }, 150)
}

var timer = null;
window.addEventListener('scroll', function() {
    if(timer !== null) {
        clearTimeout(timer);        
    }
    timer = setTimeout(function() {
      **for (key in ranges) {
        valueChange(key, randomBetween(ranges[key][0], ranges[key][1]), ranges[key][2]);
      };**
    }, 150);
}, false);           

function randomBetween(min, max) {
  return Math.random() * (max - min) + min;
}

Его задача состоит в том, чтобы задавать свойства CSS случайным образом по окончании прокрутки, а затем автоматически разрешать им возвращаться к исходному значению.

Меня интересует не сам результат, а ошибки, которые я, по-видимому, здесь сделал.Я думаю, что это просто проблема правописания / понимания JS с моей стороны.

Поскольку у меня уже был рабочий код, такой вот:

const style = document.documentElement.style;

function valueChange(prop, value, initial) {
  style.setProperty('--' + prop, value);
  setTimeout ( function() {
    style.setProperty('--' + prop, initial);
  }, 150)
}

var timer = null;
window.addEventListener('scroll', function() {
    if(timer !== null) {
        clearTimeout(timer);        
    }
    timer = setTimeout(function() {
      **var newX = randomBetween(-15, 15);
      var newY = randomBetween(-5, 5);
      var newScale = randomBetween(0.5, 1.5);
      var newOpacity = randomBetween(0.5, 0.9);
      valueChange('tx', newX + 'vw', 0);
      valueChange('ty', newY + 'vw', 0);
      valueChange('scale', newScale, 1);
      valueChange('opacity', newOpacity, 0);**
    }, 150);
}, false);           

function randomBetween(min, max) {
  return Math.random() * (max - min) + min;
}

Так чего я в основном пытаюсь достичь заменить выделенные жирным шрифтом части кода, чтобы сделать сценарий более профессиональным, менее повторяющимся.

Допустим, я готов поделиться этой идеей с кем-то, но я бы хотелИзбегайте использования «глупого» кода (даже если он работает нормально).

Кто-нибудь, кто мог бы помочь мне с этим?

РЕДАКТИРОВАТЬ:

Поэтому мне пришлось использовать:

var ranges = {
    'tx': [-15, 15, 0, 'vw'],
    'ty': [-5, 5, 0, 'vw'],
    'scale': [0.5, 1.5, 1, ''],
    'opacity': [0.5, 0.9, 0, '']
};

и:

for (key in ranges) {
    valueChange(key, randomBetween(ranges[key][0], ranges[key][1]) + ranges[key][3], ranges[key][2]);
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...