Блокировка запуска скрипта при повторном нажатии если скрипт досих пор выполняется
Пытаюсь сделать скрипт мини профиля при клике по которому увеличивается ширина блока и появляются кнопки.
Все получилось, но если я продолжаю кликать на профиль несколько раз, то он начинает открываться закрываться. Я как понимаю что пока скрипт выполняется, при повторном клике запускается опять функция. Как слеть чтобы во время выполнения функции при повторном клике она не запускалась заного а только после завешения выполнения реагировала на клик вот код: $(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, время: 10:04. |