前端——解决用户暴力操作出现的问题

前端——解决用户暴力操作出现的问题

用户在控制或点击界面切换时，如果点击过快会出现图像视觉混乱的现象，通过今天的学习了解了两种方法可以解决这种情况。

1. 添加stop()函数 通过在animate()函数前添加stop()函数来解决暴力操作的问题。stop()函数默认是控制动画在短时间内多次激活时，只完整保留最后一次动画，前面所有的动画都立刻停止。

$(function(){
          
   
	$(#btn).click(function(){
          
   
		$(.box).stop().animate({
          
   width:600px},1000,function(){
          
   
			$(.box).animate({
          
   height:600px},1000,function(){
          
   
				$(.box).animate({
          
   opacity:0});
			});
		});
	});
	$(#btn2).click(function(){
          
   
		$(.box2).stop().animate({
          
   width:+=100});
	})
});

2. 添加布尔变量进行判断

可是如果想完整看见每一次动画呢，这时可以通过添加布尔变量作为执行开关的方法来达到这一目的。

$(function(){
          
   
	var $control = false;  //设置一个布尔变量
	$(#btn).click(function(){
          
   
		if ($control){
          
   
			return;
		}
		$control = true;
		$(.box).animate({
          
   width:600px},1000,function(){
          
   
			$(.box).animate({
          
   height:600px},1000,function(){
          
   
				$(.box).animate({
          
   opacity:0});
				$control = false;
			});
		});
	});
	$(#btn2).click(function(){
          
   
		if ($control){
          
   
			return;
		}
		$(.box2).animate({
          
   width:+=100},function(){
          
   
			$control = false;
		});
	});
});

通过添加布尔变量的方法，让激活的动画在每次完成后再继续下一次激活，若是没完成，后面的激活都会因为布尔变量的原因不会继续进行。