1
    let picArr = [
  'golden-retriever-puppy.jpg',
  'Drathaar.jpg',
  "beagle.jpg",
  'alabay.jpg',
  'rizenshnautser.jpg',
  'Airedale.jpg',
];   
//function for control slide show

//здесь суть вопроса: нужно убрать глобальную переменную отсюда

let idInterval;
function showControl() {

//и поместить сюда

 let idInterval;  
  if(idInterval){    
    clearInterval(idInterval);
    return idInterval = undefined;
  } else {
    idInterval = setInterval(function(){showNextPic(picArr);}, 2000);
  } 
}

//function for getting running array index of running photo
function getIndex(arr) {
  let runningPic = document.querySelector('.pictureBlock');
  let pic = window.getComputedStyle(runningPic);
  let str = pic.backgroundImage;
  let goalStr = str.match(/[a-z?-]+[.]+(jpg)/gi);
  //console.log(goalStr);
  for (let i = 0; i < arr.length; i++){
    if(arr[i] === goalStr[0]){
      return arr.indexOf(arr[i]);
    }
  }
}

//function for showing next picture in manual mode
function showNextPic(arr){
  let ind = getIndex(arr);
  //console.log(arr.length);
  let indicatorItems = document.querySelectorAll('li');
  let runningPic = document.querySelector('.pictureBlock');
  if (ind < arr.length-1){
    ind++;
    //console.log(ind);
    runningPic.style.backgroundImage = "url(" + arr[ind] + ")";
    indicatorItems[ind].style.backgroundColor = 'lightgray';
    indicatorItems[ind-1].style.backgroundColor = 'whitesmoke';
  } else {
    ind = 0;
    runningPic.style.backgroundImage = "url(" + arr[ind] + ")"; 
    indicatorItems[ind].style.backgroundColor = 'lightgray';
    indicatorItems[arr.length-1].style.backgroundColor = 'whitesmoke';
  }  
}
//function for showing previous photo in manual mode
function showPrevPic(arr) {
  let ind = getIndex(arr);
  let indicatorItems = document.querySelectorAll('li');
  let runningPic = document.querySelector('.pictureBlock');
  if (ind > 0){
    ind--;
    runningPic.style.backgroundImage = " url(" + arr[ind] + ")";
    indicatorItems[ind].style.backgroundColor = 'lightgray';
    indicatorItems[ind+1].style.backgroundColor = 'whitesmoke';
  } else {
    ind = arr.length-1;
    runningPic.style.backgroundImage = " url(" + arr[ind] + ")";
    indicatorItems[ind].style.backgroundColor = 'lightgray';
    indicatorItems[0].style.backgroundColor = 'whitesmoke';
  }    
}
  const fW = document.querySelector('.right');
  fW.addEventListener('click', function(){showNextPic(picArr)});
  fW.addEventListener('click', function(){stopSlideShow()});
  const bW = document.querySelector('.left');
  bW.addEventListener('click', function(){showPrevPic(picArr)});
  //picture as a button for slideshow.
  const slideShowButton = document.querySelector('.pictureBlock');
slideShowButton.addEventListener('click', showControl);

1 ответ 1

1

function showControl() {
  showControl.idInterval = showControl.idInterval ?
    clearInterval(showControl.idInterval) :
    setInterval(function() { console.log(new Date()); }, 2000);
}
<button onclick="showControl()">Start / Stop</button>


function getShowClickHandler() {
  let idInterval;
  return function(e) {
    idInterval = idInterval ?
      clearInterval(idInterval) :
      setInterval(function() { console.log(new Date()); }, 2000);
  };
}

document.getElementById("startAndStop").addEventListener(
  'click', getShowClickHandler()
);
<button id="startAndStop">Start / Stop</button>

4
  • спасибо, Игорь. Хорошее решение, единственное что, в этом решении используется ООП, а мне надо решить в функциональном стиле. Кстати, выполнение функции showControl у меня происходит через EventListener, который ругается, если вызвать showControl без () и автоматически запускает выполнение функции не дожидаясь инициирующего события, если showControl() Commented 1 февр. 2019 в 18:38
  • @AlexandrShmidt Добавьте код и "ругань" в вопрос.
    – user176262
    Commented 1 февр. 2019 в 18:40
  • @AlexandrShmidt Теперь понятно, что Вам надо.
    – user176262
    Commented 1 февр. 2019 в 19:10
  • спасибо огромное!!! Commented 1 февр. 2019 в 19:12

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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