Функция 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