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

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

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

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

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