Jquery отключить href после нажатия и включить через 3 секунды

123
16

мой сайт имеет много <a target="_blank"> будет называть api

Мне нужно предотвратить двойной щелчок на этой кнопке.

вот что я сделал

.disable {
pointer-events: none;
}

$(document).ready(function(e) {
$('a').click(function(){
$(this).addClass('disable');

setTimeout(function(){
$(this).removeClass('disable');
}, 3000);
});
});

потому что его цель пуста, поэтому мне нужны эти href, которые еще могут работать через несколько секунд.

Почему-то я просто не могу включить эту кнопку снова

спросил(а) 2021-01-19T12:58:37+03:00 2 месяца, 3 недели назад
1
Решение
76

Проблема заключается в том, что this внутри setTimeout не то же самое, как this вне его.

Вы можете сделать что-то вроде:

var that = $(this);
that.addClass('disable');

setTimeout(function(){
that.removeClass('disable');
}, 3000);

И тогда он должен работать

ответил(а) 2021-01-19T12:58:37+03:00 2 месяца, 3 недели назад
62

Вы можете сделать что-то вроде jQuery('.disable').click(function(evt) { evt.preventDefault() }). Тем не менее, это остановит только клики. Вкладка, пока не произойдет вход или какие-либо другие взаимодействия, все еще могут вызвать посещение.

"Безопасным" способом может быть использование JS для временного переноса атрибута href и обратно в дальнейшем (например, сохранение где-то оригинальной цели href и замена с помощью javascript:return false; или полное удаление атрибута href

ответил(а) 2021-01-19T12:58:37+03:00 2 месяца, 3 недели назад
62

Это проблема обзора. Внутри setTimeout this больше не относится к элементу привязки, который вы пытаетесь изменить; вместо этого он указывает на окно браузера (поскольку setTimeout - это метод в объекте window).

Классический способ решения этой проблемы - захватить this в отдельной переменной, которая по-прежнему будет в пределах области setTimeout:

$(document).ready(function(e) {
$('a').click(function(){
$(this).addClass('disable');
var self = this;
setTimeout(function(){
$(self).removeClass('disable');
}, 3000);
});
});
.disable {background-color:#F00}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">test</a>

Или в ES6 вы можете использовать функцию толстой стрелки, которая не меняет область переменной:

$(document).ready(function(e) {
$('a').click(function(){
$(this).addClass('disable');
setTimeout(()=>{
$(this).removeClass('disable');
}, 3000);
});
});
.disable {background-color:#F00}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">test</a>

ответил(а) 2021-01-19T12:58:37+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема