Механизм сброса тайм-аута JavaScript - PullRequest
Новая
       17

Механизм сброса тайм-аута JavaScript

0 голосов
/ 30 ноября 2018

Что я хочу: Есть две картинки, которые переключаются / меняются каждые три секунды.

Я хочу сделать так, чтобы при нажатии кнопки изображение переключалось иАвто-своп сбрасывается.Поэтому, если нажать кнопку, изображение поменяется местами и через три секунды оно будет автоматически заменено, пока кнопка не будет нажата снова, и цикл повторится.

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

Редактировать: Пожалуйста, не создавайте новую базу кода.Просто измените мины.Код не обязательно должен быть очень лаконичным.Я только три недели в JavaScript (и это мой первый язык программирования).Я должен объяснить одноклассникам, и было бы неплохо, чтобы в коде были элементы, которых я не понимаю.Приносим извинения за неудобства.

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

<html>
<head>
    <script>
        let reset = setTimeout(change, 3000);
        function change() {
            if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
                document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
            }
            else {
                document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
            }
            setTimeout(change, 3000);
        }
        function fastChange() {
            clearTimeout(reset);
            if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
                document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
            }
            else {
                document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
            }
        }
    </script>
</head>
<body>
    <input type="button" onclick="fastChange();">
    <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" id="picture">
</body>
</html>

Ответы [ 4 ]

0 голосов
/ 30 ноября 2018

НЕ КАК ВЫ CLEARTIMEOUT: 

<html>
<head>
    <script>
        var i;
        function change() {
            if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
                document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
            }
            else {
                document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
            }
            i = setTimeout(change, 3000);
        }
        function fastChange() {
            clearTimeout(i);
            if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
                document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
            }
            else {
                document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
            }
            i = setTimeout(change, 3000);
        }
    </script>
</head>
<body onload="setTimeout(change, 3000)">
    <input type="button" onclick="fastChange();">
    <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" id="picture">
</body>
</html>
0 голосов
/ 30 ноября 2018

Причина, по которой ваш таймер сбрасывается, заключается в том, что вы не очищаете тайм-аут.

вам нужно сделать ссылку на тайм-аут, а затем использовать clearTimeout (), когда вы делаете быстрое изменение.Я не думаю, что это возможно или целесообразно сделать это встроенным, как у вас, так что ваш код должен быть подвергнут рефакторингу 

let imgSrc1 = 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350'
let imgSrc2 = 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350'

let imgElement = document.getElementById('picture');
let timeout;

function change() {
   if(imgElement.src === imgSrc1) {
      imgElement.src = imgSrc2;
   } else {
      imgElement.src = imgSrc1;
   }
   if (timeout) {
      clearTimeout(timeout);
}

   timeout = setTimeout(change, 3000);
}

Вам даже не нужна вторая функция fastChange.Теперь вы можете отправить прослушиватель onClick на change() следующим образом:

document.getElementById («все, что вы хотите нажать»). OnCLick = change;

0 голосов
/ 30 ноября 2018

Установка и очистка тайм-аутов в нескольких местах будет работать, но я предпочитаю использовать «основной цикл» и переменную для подсчета кадров.

Вот пример, который использует setInterval и сбрасывает переменную timerкогда кнопка была нажата: 

const url1 = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
const url2 = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";

function change() {
  picture.src = picture.src == url1 ? url2 : url1;
}

var timer = 0;

setInterval(function() {
  timer++;
  time.textContent = timer;
  if (timer === 30) fastChange();
}, 100);

function fastChange() {
  change();
  timer = 0;
}

picture.src = url1;
swap.onclick = fastChange;
#picture {
  height: 70vh
}
<button id="swap">SWAP</button> <span id="time"></span><br>
<img id="picture">
0 голосов
/ 30 ноября 2018

Вы можете сделать это, вызвав setTimeout и обновив индекс при необходимости.Просто сохраните самый последний идентификатор тайм-аута, чтобы его можно было отменить при сбросе с помощью clearTimeout. 

// store the reference to the <img> that contains the picture
const pic = document.getElementById('picture')

// store a list (array) of the two picture urls
const sources = [
  'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350',
  'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350'
]

// used to store a reference to the interval timer you created.
var lastTimer
// a starting index of the list (i.e. which image we are up to right now)
var index = 1

// this functions swaps the image and sets a timer
function startRotation() {
  // update the index to the next one (goes 0-1-0-1->etc)
  index = 1 - index
  // sets the .src of the image element
  pic.src = sources[index]
  // starts a 3 second timer to call this same function again
  // but also stores a reference to the timer so that it can be cancelled
  lastTimer = setTimeout(startRotation, 3000)
}

// this functions resets the timer and restarts the process
function reset() {
  // stop the current timer if there is one
  if(lastTimer){
    clearTimeout(lastTimer)
  }
  // restart the process
  startRotation()
}

// start the swapping process on start
startRotation()
<input type="button" onclick="reset();">
<img id="picture">
...