关于js对象中两个函数互相调用,其中一个为定时器声明,定时器循环报错问题(记录一次尝试新写法的报错经历)附带无缝轮播图代码

先上之前的错误代码吧,注意计时器这个方法(是想把之前写的的轮播图演示重构一下)

var obj = {
    sleepTime: 2000,//轮播延时
    cont: 0,//第几张
    origin: document.getElementsByClassName('main-img')[0],//拿到全部图片的父级
    init: function () {
        this.timer();
    },
    move: function (origin) {//移动图片
        this.cont++;
        clearInterval(timer1);
        origin.style.transform = 'translate3d(' + this.cont * (-500) + 'px,0px,0px)';
        origin.style.transitionDuration = '1s';
        this.sleepTime = 2000;
        this.timer();
        if (this.cont > 4) {
            clearInterval(timer1);
            this.cont = 0;
            origin.style.transitionDuration = '0s';
            origin.style.transform = 'translate3d(' + this.cont * (-500) + 'px,0px,0px)';
            this.sleepTime = 0;
            this.timer();
        }
    },
    timer: function () {//设置定时
        timer1 = setInterval(function () {
            this.move(this.origin);
        }, this.sleepTime)
    }
}
obj.init();

    报错信息是这样的:move is not a function.当即想到一个问题,就是move的声明有问题,或者在计时器中无法访问我定义的move,实验几次之后才发现是这个问题,定时器定义后执行环境就不是在对象中了,这也就访问不到move()了,那么只需要把定时器定时器中的this全部改成obj就可以了。

这种写法方便管理代码,不过还是需要谨慎使用。后续还需要深入学习才能避免在简单事情上经常犯错。

猜你喜欢

转载自blog.csdn.net/zmdmwh/article/details/84197478