先上代码吧(是想把之前写的的轮播图演示重构一下),注意timer这个有问题的方法:
var obj = {
sleepTime: 2000,//轮播延时
cont: 0,//第几张
step: -500,//步距
state: true,//左为false,右为true
origin: document.getElementsByClassName('main-img')[0],//拿到全部图片的父级
btnLeft: document.getElementsByClassName('btn')[0],
btnRight: document.getElementsByClassName('btn')[1],
init: function () {//主函数
this.timer();
this.click();
},
move: function (origin) {//移动
this.state == true ? this.cont++ : this.cont--;
clearInterval(timer1);
origin.style.transform = 'translate3d(' + this.cont * this.step + 'px,0px,0px)';
origin.style.transitionDuration = '0.3s';
this.sleepTime = 2000;
this.timer();
if (this.cont > 4 && this.state == true) {
this.change(origin, 0);
};
if (this.cont < 0 && this.state == false) {
this.change(origin, 4);
};
},
change: function (origin, cont) {//特殊处理
clearInterval(timer1);
this.cont = cont;
origin.style.transitionDuration = '0s';
origin.style.transform = 'translate3d(' + this.cont * this.step + 'px,0px,0px)';
this.sleepTime = 50;
this.timer();
},
timer: function () {//计时器
timer1 = setInterval(function () {
this.move(obj.origin);
this.state = true;
}, this.sleepTime)
},
click: function () {
obj.btnLeft.onclick = function () {//向左
obj.state = false;
obj.move(obj.origin)
};
obj.btnRight.onclick = function () {//向右
obj.state = true;
obj.move(obj.origin)
};
}
}
obj.init();
报错信息是这样的:move is not a function.当即想到一个问题,就是move的声明有问题,或者在timer中无法访问我定义的move,实验几次之后才发现是这个问题,定时器定义后执行环境就不是在对象中了,这也就访问不到move()了,那么只需要把定时器定时器中的this全部改成obj就可以了。
这种写法方便管理代码,不过还是需要谨慎使用。后续还需要深入学习才能避免在简单事情上经常犯错。