Изменение интервалов opacity в javascript

175

31 мая 2018, 10:40

Всем привет!

Подскажите, как сделать, что бы опасити сначала (6 раз) менялся со скорость 250 мс, потом (13 раз) 1000 мс, а потом текст и вовсе становился статичным.
И возможно ли это потом зациклить, что бы через определенный период опасити снова начинал меняться 6 раз, 13 раз и вновь статичным и т.д.

var i = 0; 
 
function interval() { 
  blink.style.opacity = 1 - (blink.style.opacity || 1); 
  i++ 
  if (i < 6) { 
    setInterval(interval, 250) 
  } else if (i > 7) { 
    setInterval(interval, 1000) 
  } else(i = 20) { 
    clearInterval(intervalID) 
  } 
} 
var intervalID = setInterval(interval, 1000);

<div id="blink">Привет, мир</div>

Answer 1

var i = 0; 
var timer, intervalID; 
 
function interval() { 
  blink.style.opacity = 1 - (blink.style.opacity || 1); 
  i++; 
  if (i === 6) { 
    clearInterval(intervalID); 
    intervalID = setInterval(interval, 100); 
  } 
  if (i === 19) { 
    // тут мы останавливаем выполнение - делаем статическим 
    clearInterval(intervalID); 
    console.log("stopped"); 
    timer = setTimeout(initInterval, 5000); //Ждем 5 секунд и запускаем заного 
    console.log(timer) 
    i = 0; 
  } 
} 
 
function initInterval() { 
  console.log("init"); 
  intervalID = setInterval(interval, 250); 
} 
 
initInterval();

<div id="blink">Привет, мир</div>

Как-то вот так получилось у меня. Разумеется, можно и покрасивей сделать. Но вроде понятным способом расписал.

Есть еще способ (через рекурсивный setTimeout). Но он менее понятный:

var i = 0; 
var currentInterval; 
 
function interval2(prevInterval) { 
  blink.style.opacity = 1 - (blink.style.opacity || 1); 
  if (i <= 1) 
    return 250; 
  if (i === 6) { 
    return 1000; 
  } 
  if (i === 19) { 
    // тут мы останавливаем выполнение - делаем статическим текст 
    // ставим время "ожидания" 
    console.log("stopped"); 
    i = 0; 
    return 5000; 
  } 
  return prevInterval; 
} 
 
function runSetTimeout(){ 
    console.log("Started recursive"); 
    setTimeout(function run() { 
      i++; 
      currentInterval = interval2(currentInterval); 
      console.log(currentInterval); 
      setTimeout(run, currentInterval); 
    }, 250); 
} 
runSetTimeout();

<div id="blink">Привет, мир</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как добавить в таблицу jscrollpane

Кто знает в чем проблема? Хочу сочетать таблицу и jscrollpane, когда начинаю использовать этот плагин все ломает, не получается зафиксировать theadКто...

182

javascript

Появление фото справа при hover эффекте

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

176

javascript

Как обратиться к картинке, лежащей на несколько уровней выше?

Уже битый час ломаю голову над задачей: обратиться к картинке, лежащей на несколько уровней выше

188

Java

При возврате в RecyclerView он пустой

Есть простой RecyclerView в котором выводится список публикацииПри нажатию на каждую из них я перехожу на новый активити

213