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>