1

Добрый день.
Необходимо сделать бесконечную смену картинок . Мое предположение:

while(1) {
  $('#1').toggle();
  $('#2').toggle();
}

Смущает while(1): всю жизнь говорили не делать, а тут. Корректно ли такое решение? Есть ли альтернативные способы реализации?(цикл for не предлагать:))

9
  • 5
    Скорее всего, вам нужен setInterval
    – Dmitry
    9 авг 2016 в 16:47
  • 2
    Попробуйте setInterval 9 авг 2016 в 16:47
  • 1
    в чем измерять корректность? приведенное решение в принципе работает
    – Grundy
    9 авг 2016 в 16:50
  • 1
    @Grundy вот только перестает работать все остальное :) 9 авг 2016 в 16:53
  • 1
    @PavelMayorov, а про остальное речи не было :Р
    – Grundy
    9 авг 2016 в 16:54

2 ответа 2

4

все остальное перестает работать потому, что вы в синхронном (читай, однопоточном) режиме запускает цикл, в котором скрипт и застревает - поскольку while(true) - выполняется всегда, ибо условие true всегда истинно.

Мало того, поскольку выполняется он без ограничений по времени (нет sleep, условно говоря) ресурсов ЦПУ он жрет немеряно, все остальные скрипты, даже асинхронные, вполне могут начать притормаживать.

как правильно сказал @Dmitry, используйте setInterval

setInterval(function(){ alert("Hello"); }, 3000);

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

3

requestAnimationFrame() как альтернатива setInterval():

var img = document.getElementById('e-img')
  ,src = [
    'https://www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=32&d=identicon&r=PG'
    ,'https://graph.facebook.com/10204328181386038/picture?type=large'
  ]
  ,start
  ,current = 0
;

function step(timestamp) {
  var progress;
  if( !start) start = timestamp;
  progress = Math.round((timestamp - start) / 500) % 2;
  if( current != progress) {
    current = progress;
    img.src = src[current];
  }
  requestAnimationFrame(step);  
}

requestAnimationFrame(step);
<img src="" alt="" id="e-img" width="32" height="32" border="0">

Бытовым языком, функция вызывается каждый раз, как браузер готов перерисовать экран. Если ничем не загружет – часто. Если призадумался, то пореже. В этой задаче супер частая отрисовка не нужна, и применение requestAnimationFrame() здесь имеет только одно преимущество: более точный тайминг, чем setInterval().

Ф-я step() вызывается так часто, как браузер готов что-то отрисовать. Мы запоминаем время начала отсчёта, и следим, чтобы прошла хотя бы 1/2 секунды, и тогда меняем картинку.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.