Форум

BesTime · #1 (**permalink**) 20.12.2013, 13:28

Пытаюсь сделать скрипт мини профиля при клике по которому увеличивается ширина блока и появляются кнопки.
Все получилось, но если я продолжаю кликать на профиль несколько раз, то он начинает открываться закрываться. Я как понимаю что пока скрипт выполняется, при повторном клике запускается опять функция.
Как слеть чтобы во время выполнения функции при повторном клике она не запускалась заного а только после завешения выполнения реагировала на клик
вот код:

$(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);
	  });
	  

});

mi.rafaylik · #2 (**permalink**) 20.12.2013, 14:51

Проверять доступ к выполнению функции через переменную:

$(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);
		}
	});

});

ksa · #3 (**permalink**) 20.12.2013, 15:00

Сообщение от BesTime

Как слеть чтобы во время выполнения функции при повторном клике она не запускалась заного а только после завешения выполнения реагировала на клик

Как вариант...

<!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>

danik.js · #4 (**permalink**) 20.12.2013, 15:59

<!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>

Vlasenko Fedor · #5 (**permalink**) 20.12.2013, 17:24

зачем используем тег <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>

Форум

Справочник

Discord чат

Курсы javascript