Блокировка запуска скрипта при повторном нажатии если скрипт досих пор выполняется
Пытаюсь сделать скрипт мини профиля при клике по которому увеличивается ширина блока и появляются кнопки.
Все получилось, но если я продолжаю кликать на профиль несколько раз, то он начинает открываться закрываться. Я как понимаю что пока скрипт выполняется, при повторном клике запускается опять функция. Как слеть чтобы во время выполнения функции при повторном клике она не запускалась заного а только после завешения выполнения реагировала на клик вот код:
$(document).ready(function(){
var lastwidth = $("#mini_profile").width();
$("#mini_profile").click(function () {
$("#mini_profile").animate({width:"200px"});
setTimeout(function(){
$("#exit2").fadeIn("slow");
},500);
setTimeout(function(){
$("#exit2").hide();
},4000);
setTimeout(function(){
$("#mini_profile").animate({width:lastwidth});
},4500);
});
});
|
Проверять доступ к выполнению функции через переменную:
$(document).ready(function(){
var accessAction = 1; // изначально разрешаем доступ к выполнению функции
var lastwidth = $("#mini_profile").width();
$("#mini_profile").click(function(){
if (accessAction) { // проверяем разрешён ли доступ
accessAction = 0; // мы уже внутри, теперь блокируем повторное выполнение функции
$("#mini_profile").animate({width:"200px"}, "slow");
setTimeout(function(){
$("#exit2").fadeIn("slow");
}, 500);
setTimeout(function(){
$("#exit2").hide();
}, 4000);
setTimeout(function(){
$("#mini_profile").animate({width:lastwidth}, "slow", function(){ // используем callback анимации
accessAction = 1; // последняя анимация завершилась, снимаем блокировку доступа
});
}, 4500);
}
});
});
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(function (){
$('a').click(function (){
action(this);
});
});
function action(Obj) {
$(Obj).unbind('click');
setTimeout(function(){
alert(1);
$(Obj).click(function (){
action(this);
});
},5000);
};
</script>
</head>
<body>
<a href='#'>test</a>
</body>
</html>
|
<!DOCTYPE html>
<a href="#">test</a>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
(function(){
var busy = false;
$('a').click(function (){
if (busy)
return;
busy = true;
setTimeout(function(){
alert(1);
busy = false;
},5000);
});
})();
</script>
|
зачем используем тег <a> не по назначению
<style>
.link {
border:none;
background-color: transparent;
text-decoration: underline;
color: #476C8E;
}
.link:hover {
cursor: pointer;
}
.link:focus {
outline: none;
}
</style>
</head>
<body>
<input type="button" onclick="openForm(this)" value="Нажми меня" class="link">
<script>
var openForm = function (el) {
el.disabled = 1;
setTimeout(function () {
alert(1);
el.disabled = 0;
}, 3000);
};
</script>
</body>
|
| Часовой пояс GMT +3, время: 08:14. |