Как изменить цвет фигуры зацикливание таблицы интервалов бесконечно в js? - PullRequest
Новая
       20

Как изменить цвет фигуры зацикливание таблицы интервалов бесконечно в js?

0 голосов
/ 19 сентября 2018

У меня есть таблица, которая выглядит как 

duration/ms color
10 red
16 yellow
10 red
20 blue
...

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

Как я могу попросить JS ждать 10 мс?Я попытался

1. записать цикл, проходящий через таблицу, и использовать Date.now () для управления переходом 

while (true) {
    startingTime = Date.now()
    duration = table[index]
    while (Date.now() < startingTime + duration) {
        continue
    }
    //changeColor
    //updateIndex
}

Слишком много потребления.Blowed мой браузер.

2.setTimeout 

var index = 1
var updateColor = function() {
    //updateshapecolor(color_table[index])
    //updateinex
    setTimeout(updateColor, duration_table[index])

}
updateColor()

Работает хорошо для маленького стола, но работает очень медленно в большом столе, и в конечном итоге взорвать стек.

Что будетлучшая практика?Может кто-нибудь любезно предложить?

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

вы можете использовать requestAnimationFrame он не потребляет вашу производительность как бесконечный цикл, потому что он вызывает обратный вызов, только когда прошло 1/60 секунды 

let index = 0;
let lastTime = 0; /* unix timestamp */

/* draw callback */
/* [curTime] - current time in unix timestamp */
let onDraw = function(curTime) {

    if (curTime > lastTime + table[index])
    {
        /* update state of index */
        index = (index + 1) % table.length;

        /* update state of last time */
        lastTime = curTime;

        /* change color here */
    }

    /* wait for next update */
    requestAnimationFrame(onDraw);
}

/* start the animation */
requestAnimationFrame(onDraw);
0 голосов
/ 19 сентября 2018

Этот вид простой анимации, вероятно, может быть выполнен в CSS с гораздо меньшей нагрузкой на браузер.Вот пример, который использует ваши данные для построения таблицы стилей с правильными настройками анимации, чтобы изменить «цвет».Возможно, вам придется изменить «цвет фона» или что-то еще. 

//Your data
var data = [
  {color: "red", ms: 10},
  {color: "yellow", ms: 16},
  {color: "red", ms: 10},
  {color: "blue", ms: 20}
];

// calculate the total time
var totalms = data.reduce((acc,obj) => acc + obj.ms, 0);

var runningtot = 0;

// build the keyframes
var style = data.reduce((str,obj) => {
  var pct = runningtot / totalms * 100;
  runningtot += obj.ms;
  str += pct + "% { color: " + obj.color + "; }";
  return str;
}, "");

var totallength = totalms / 1000 + "s";

// create a class called pulser
style = ".pulser {animation: pulse " + totallength + " infinite;} @keyframes pulse { " + style + " }";

// the stylesheet contents
console.log(style);

// append it to the document
var ss = document.createElement('style');
ss.innerHTML = style;
document.body.appendChild(ss);
<div class='pulser'>Example Text</div>
...