javascript - [优化代码] 模拟数据更新的小插件
本文介绍了javascript - [优化代码] 模拟数据更新的小插件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
求大神们从代码结构易读性方面 指点下 如果优化；
多次、快速点击 refresh 按钮，造成动画(函数)累积， 如何在点击时 清空？
----------------------------HTML 部分
<body>
<div class="wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<button>refresh</button></body>
--------------------------------css样式部分
<style>
.wrap{ width:50px; height:50px; margin:200px auto; transform-origin:1px 30px; display:none; }
ul,li{ padding:0; margin:0; list-style:none; }
ul{ position:relative; }
li{ opacity:0; display:block; width:2px; height:20px; border-radius:2px; background:red; position:absolute; transform-origin: center 30px; }
@keyframes rolling{
0%{ transform:rotate(0deg)}
100%{ transform:rotate(360deg)}
}
@keyframes scaleing{
0%{ transform: scale(1,1)}
100%{ transform: scale(0,0)}
}
.scale{ animation:scaleing 1s linear; animation-fill-mode:forwards;}
.roll{ animation:rolling 2s linear;}
button{ position:absolute; top:200px; left:200px; }
</style>
--------------------------------------JS部分
<script src="js/jquery-3.1.0.js"></script>
<script>
$(function(){
// 组件
for(var i=0; i<$('li').length; i++){
$('li').eq(i).css({'transform':'rotate('+i*22.5+'deg)'});
}
// 刷新
function refreshLi(){
$('.wrap').css({display:'block'})
.removeClass('scale');
$('li').css({opacity:0});
var n=0;
showLi();
// 显示
function showLi(){
setTimeout(function(){
if(n==$('li').length){
Rotate();
return;
}
$('li').eq(n).animate({opacity:1},'fast',function(){
n++;
showLi()
});
},10);
}
// 旋转
function Rotate(){
$('.wrap')
.addClass('roll');
setTimeout(function(){
$('li').animate({opacity:0});
blink();
},1000)
}
// 闪烁
function blink(){
var n=0;
var k=0;
next();
function next(){
if(n==$('li').length){
n=0;
}
setTimeout(function(){
k++;
if(k==25){
$('.wrap').removeClass('roll')
.addClass('scale');
}
if(k==35){
setTimeout(function(){
$('.wrap').css({display:'none'});
},0);
// 暂停递归
return;
}
console.log(k,n)
$('li').eq(n).animate({opacity:1});
n++;
next();
$('li').eq(n-8).animate({opacity:0});
},100)
}
}
}
$('button').on('click',function(){
refreshLi();
})
})
</script>
解决方案
<script>
$(function(){
for (var i=0; i<$('li').length; i++) {
$('li').eq(i).css({'transform':'rotate('+i*22.5+'deg)'});
}
var fresh = {
n: 0,
k: 0,
key: true,
init: function () {
if (!this.key) {
return false;
}
this.key = !this.key;
$('.wrap').css({display:'block'});
this.showLi();
},
showLi: function () {
var _this = this;
setTimeout(function(){
if (_this.n == $('li').length) {
_this.Rotate();
return;
}
$('li').eq(_this.n).animate({opacity:1},'fast',function(){
_this.n++;
_this.showLi()
});
},10);
},
Rotate: function () {
var _this = this;
$('.wrap').addClass('roll');
setTimeout(function(){
$('li').animate({opacity:0});
_this.blink();
},1000)
},
blink: function () {
this.n = 0;
this.next();
},
next: function () {
var _this = this;
if (_this.n == $('li').length) {
_this.n = 0;
}
setTimeout(function () {
_this.k++;
if (_this.k == 25) {
$('.wrap').removeClass('roll')
.addClass('scale');
}
if (_this.k == 35) {
$('.wrap').css({display:'none'});
_this.styleInit();
return;
}
console.log(_this.k,_this.n)
$('li').eq(_this.n).animate({opacity:1});
_this.n++;
_this.next();
$('li').eq(_this.n - 8).animate({opacity:0});
},100)
},
styleInit: function () {
this.key = !this.key;
this.n = 0;
this.k = 0;
// other style
// to do ...
}
};
$('button').on('click',function(){
fresh.init();
})
})
</script>能力和时间有限，大概给优化了一下。代码现在是不全的，需要你在fresh.styleInit里写上初始样式。
这篇关于javascript - [优化代码] 模拟数据更新的小插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
