Функция setTimeout()

[sssema96]

Здравствуйте. Подскажите как правильно использовать функцию setTimeout() для моего кода:
function puskAvr(){
let timer; // пока пустая переменная
x =8; // стартовое значение обратного отсчета
countdown(); // вызов функции
function countdown(){ // функция обратного отсчета
document.getElementById('timerAvr').innerHTML ='Таймер АВР 0,4кВ: ' + x;
x--; // уменьшаем число на единицу
if (x<0){
clearTimeout(timer); // таймер остановится на нуле
}
else {
timer = setTimeout(countdown, 1000);
}
}

}
let output_divs = [
document.querySelector('.imgDKS1')
]
document.querySelector('.button').addEventListener ('click', e => {
if (e.target.classList.contains('red_button_6')) {
puskAvr();
let links_arr = e.target.dataset.link.split(` `),
tops_arr = e.target.dataset.top.split(` `),
lefts_arr = e.target.dataset.left.split(` `)
output_divs.forEach((el, i) => {
el.insertAdjacentHTML('beforeEnd',
`<img src="${links_arr[i]}" style="position:relative; top:${tops_arr[i]}px;left:${lefts_arr[i]}px;">`
)
})

}
})

Задача в том что бы при нажатии red_button_6 запускался таймер с функции puskAvr(), и после того как переменная x достигнет 0 выполнить оставшуюся часть кода:
let links_arr = e.target.dataset.link.split(` `),
tops_arr = e.target.dataset.top.split(` `),
lefts_arr = e.target.dataset.left.split(` `)
output_divs.forEach((el, i) => {
el.insertAdjacentHTML('beforeEnd',
`<img src="${links_arr[i]}" style="position:relative; top:${tops_arr[i]}px; left:${lefts_arr[i]}px;">`
)
})

[рони]

sssema96,
строки 23 - 32 перенести в строку 10

[sssema96]

рони,
А как с помощью setTimeout() сделать выдержку времени 8с. перед выполнением этого кода?

[рони]

А как с помощью setTimeout() сделать выдержку времени 8с. перед выполнением этого кода?

у вас же есть эта задержка! что не так?

[sssema96]

рони,
У меня есть кнопка при нажатии на которую выводятся изображения в указанных координатах <button class="show-image6 red_button_6"
data-link="img/greenled.png img/avtomatOff04kV.png img/diodYellowOff.png img/diodRedButtonT2.png img/avtomatOn04kV.png img/diodYellowOn.png img/diodBlackButtonT2.png"
data-top="151 192 400 466 190 406 465"
data-left="832 150 27 27 150 27 24"
type="button" id="click_red6"></button>
Сам скрип к ней вот:

let output_divs = [
document.querySelector('.imgDKS1'),
document.querySelector('.vvodT2'),
document.querySelector('.vvodT2'),
document.querySelector('.vvodT2'),
document.querySelector('.vvodT1'),
document.querySelector('.vvodT1'),
document.querySelector('.vvodT1')
]
document.querySelector('.button').addEventListener ('click', e => {
if (e.target.classList.contains('red_button_6')) {

let links_arr = e.target.dataset.link.split(` `),
tops_arr = e.target.dataset.top.split(` `),
lefts_arr = e.target.dataset.left.split(` `)
output_divs.forEach((el, i) => {
el.insertAdjacentHTML('beforeEnd',
`<img src="${links_arr[i]}" style="position:relative; top:${tops_arr[i]}px; left:${lefts_arr[i]}px;">`
)
})

}
})

Моя задача что бы через 8 секунд после нажатия на red_button_6, появились те самые изображения.

[рони]

sssema96,
:-?

function puskAvr(target){
let timer; // пока пустая переменная
x =8; // стартовое значение обратного отсчета
countdown(); // вызов функции
function countdown(){ // функция обратного отсчета
document.getElementById('timerAvr').innerHTML ='Таймер АВР 0,4кВ: ' + x;
x--; // уменьшаем число на единицу
if (x<0){
clearTimeout(timer); // таймер остановится на нуле
let links_arr = target.dataset.link.split(` `),
tops_arr = target.dataset.top.split(` `),
lefts_arr = target.dataset.left.split(` `);
output_divs.forEach((el, i) => {
el.insertAdjacentHTML('beforeEnd',
`<img src="${links_arr[i]}" style="position:relative; top:${tops_arr[i]}px;left:${lefts_arr[i]}px;">`
)
})
}
else {
timer = setTimeout(countdown, 1000);
}
}

}
let output_divs = [
document.querySelector('.imgDKS1')
]
document.querySelector('.button').addEventListener ('click', e => {
if (e.target.classList.contains('red_button_6')) {
puskAvr(e.target);


}
})

[sssema96]

рони,Спасибо, не пойму как влияет e.target на выполнение?
Вы в puskAvr(e.target); добавили это в ( )

[рони]

как влияет e.target на выполнение?
даёт возможность сработать строкам 1, 10, 11, 12 пост #6