Как сделать отложенный запуск ссылки?

Question

[VegasChickiChicki]

Гуглом я пользоваться умею и я смог найти отложенный запуск вот :
https://codepen.io/codemode/pen/pyyobB
Но все решение которые я находил ,все они написаны на jquery ,а мне нужно на чистом JS ,не могу разобраться что я делаю не так ,но почему то написать тоже самое на чистом JS у меня не получается ,прощу помощи.

Comments

[0xD34F]

почему то написать тоже самое на чистом JS у меня не получается

А вы вообще пробовали? - что-то не вижу результатов ваших попыток.

[VegasChickiChicki]

0xD34F, да

let elements = document.getElementsByTagName("a");

elements[i].onclick = function f1() {

            for (let i = 0; i < elements.length; i++) {
                setTimeout(function() {
                    window.location = elements[i].href
                }, 3000);
            }

}

Как-то так я пытаюсь это реализовать...

Answer 1

[Владимир]

Вот в этом куске кода, который отвечает за отложенный переход jquery нет совсем

setTimeout(function() {window.location = href}, 3000);

Comments

[VegasChickiChicki]

Да ,но есть выше var href = $(this).attr('href');
Не могу понять что это означает ,изучаю чистый JS , jquery пока совсем не трогал .
В моем случае у меня есть массив из ссылок ,возможно я как-то не правильно его перебираю или не так обращаюсь...

let elements = document.getElementsByTagName("a");

elements[i].onclick = function f1() {

            for (let i = 0; i < elements.length; i++) {
                setTimeout(function() {
                    window.location = elements[i].href
                }, 3000);
            }

}

Вот так я пытаюсь...

[Владимир]

VegasChickiChicki, А почему у вас цикл перебора внутри elements[i].onclick = function f1() { ?

[DanKud]

VegasChickiChicki, что вам нужно сделать то? Чтобы просто при нажатии на ссылку переход по ней задерживался на 3 секунды? Или вам нужно при нажатии на любую ссылку открыть все остальные тоже?

[VegasChickiChicki]

Владимир,

for (let i = 0; i < elements.length; i++) {

        elements[i].onclick = function f1() {

            for (let i = 0; i < elements.length; i++) {
                setTimeout(function() {
                    window.location = elements[i].href;
                }, 3000);
            }

    }
}

Перебираю массив с ссылками ,при клике на i-тую ссылку проходит действие.

[VegasChickiChicki]

DanKud, Мне нужно что бы при нажатии на ссылку переход был отложен на 3 секунды. По скольку ссылок на сайте может быть несколько ,у меня массив этих ссылок.

[DanKud]

let elements = document.getElementsByTagName("a");
for (let i = 0; i < elements.length; i++) {
    elements[i].onclick = function(e) {
        let href = this.href;
        setTimeout(function() {
            window.location = href;
        }, 3000);
        e.preventDefault();
    }
}

[Dima Polos]

DanKud, e.preventDefault, по-моему, в обработчике должен быть самой первой строчкой, иначе переход по идее состоится.

[VegasChickiChicki]

DanKud, Работает так как нужно ,огромное спасибо! Не могли бы вы объяснить что произошло)
При клики выполняется функция ,у нее есть аргумент e ,а что он делает я не могу понять ,не могли пожалуйста объяснить ,буду очень благодарен!

[VegasChickiChicki]

DanKud, Если я правильно понял ,когда я кликаю на ссылку , выполняется функция ,она сразу же event.preventDefault(); ,который в свою очередь отменяет переход ,а спустя время ,которое стоит в таймере , проходит переход ,я правильно понял?

[Владимир]

Dima Polos, Не должен, калбек у setTimeout асинхронный и на следующее за setTimeout не повлияет

[DanKud]

VegasChickiChicki, аргумент e это идентификатор события (event), которое происходит при нажатии на элемент. С помощью метода e.preventDefault() мы отменяем все дефолтные действия браузера, которые он должен сделать при наступлении этого события. В нашем случае клика по ссылке.

[Владимир]

VegasChickiChicki, https://learn.javascript.ru/

[Dima Polos]

DanKud, хочу еще подметить, что использование let без бабеля опасно, если прям в продакшен что-то делать, а без let, var тут не прокатит, так как в конце цикла все запущенные таймауты будут ссылаться на одну и ту же переменную i.

[DanKud]

Немного поправил код, чтобы он корректно работал в Internet Explorer.

[Владимир]

Dima Polos, https://caniuse.com/#feat=let только в 11 експлорере как раз будут проблемы с циклом for
Если нужен 11 оберни блок elements[i].onclick = function(e) { в

https://developer.mozilla.org/uk/docs/Glossary/IIFE

[Dima Polos]

Владимир, спасибо, я в курсе, прост человек учит js, чтоб сразу понимал риски)