Jquery отключить href после нажатия и включить через 3 секунды
мой сайт имеет много <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, которые еще могут работать через несколько секунд.
Почему-то я просто не могу включить эту кнопку снова
Проблема заключается в том, что this внутри setTimeout не то же самое, как this вне его.
Вы можете сделать что-то вроде:
var that = $(this);
that.addClass('disable');
setTimeout(function(){
that.removeClass('disable');
}, 3000);
И тогда он должен работать
Вы можете сделать что-то вроде jQuery('.disable').click(function(evt) { evt.preventDefault() }). Тем не менее, это остановит только клики. Вкладка, пока не произойдет вход или какие-либо другие взаимодействия, все еще могут вызвать посещение.
"Безопасным" способом может быть использование JS для временного переноса атрибута href и обратно в дальнейшем (например, сохранение где-то оригинальной цели href и замена с помощью javascript:return false; или полное удаление атрибута href
Это проблема обзора. Внутри 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>