Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.01.2021, 12:09
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

Функция setTimeout()
Здравствуйте. Подскажите как правильно использовать функцию 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;">`
                )
            })
Ответить с цитированием
  #2 (permalink)  
Старый 25.01.2021, 12:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

sssema96,
строки 23 - 32 перенести в строку 10
Ответить с цитированием
  #3 (permalink)  
Старый 25.01.2021, 12:55
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

рони,
А как с помощью setTimeout() сделать выдержку времени 8с. перед выполнением этого кода?
Ответить с цитированием
  #4 (permalink)  
Старый 25.01.2021, 13:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

Сообщение от sssema96
А как с помощью setTimeout() сделать выдержку времени 8с. перед выполнением этого кода?
у вас же есть эта задержка! что не так?
Ответить с цитированием
  #5 (permalink)  
Старый 25.01.2021, 13:24
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

рони,
У меня есть кнопка при нажатии на которую выводятся изображения в указанных координатах
<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, появились те самые изображения.
Ответить с цитированием
  #6 (permalink)  
Старый 25.01.2021, 13:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

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);


        }
    })
Ответить с цитированием
  #7 (permalink)  
Старый 25.01.2021, 13:43
Интересующийся
Отправить личное сообщение для sssema96 Посмотреть профиль Найти все сообщения от sssema96
 
Регистрация: 12.01.2021
Сообщений: 24

рони,Спасибо, не пойму как влияет e.target на выполнение?
Вы в
puskAvr(e.target);
добавили это в ( )
Ответить с цитированием
  #8 (permalink)  
Старый 25.01.2021, 13:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как-то странно работает код. Не выполняется целиком функция Yuriy-155 jQuery 7 22.11.2019 15:14
Грамотный setTimeout Artur_Hopf Общие вопросы Javascript 4 27.09.2018 07:50
Помогите разобраться с setTimeout arkadii_parovozov Общие вопросы Javascript 9 01.06.2017 12:47
AJAX функция для новых html-элементов broadcast77 AJAX и COMET 25 03.03.2014 12:01
setTimeout в браузере IE и Opera leha66 Javascript под браузер 2 13.12.2010 12:02