14.小项目总结

69 阅读1分钟

that 相关

this.myPlugin.Animate.prototype.start = function(){
    if(this.timer || this.currentCount >= this.animateCount) return;
    if(this.option.onstart) this.option.onstart();
    // 这里为什么要用that 呢?
    var that = this;
    this.timer = setInterval(function(){
        that.currentCount ++;
        for (var prop in that.curData){
            that.curData[prop] += that.perStepMove[prop];
        }
        if(that.currentCount === that.animateCount){
            clearInterval(that.timer);
            that.timer = null;
            for (var prop in that.curData){
                that.curData[prop] = that.end[prop];
            }
        }
        // if(that.option.onmove) that.option.onmove.call(that);
        if(that.option.onmove) that.option.onmove.call(that, that.currentMove);
    },this.duration)

};

这里需要特别注意一个问题就是由于setInterval(function(){},this.duration)里面的代码并不是某个对象调用的,所以里面的this是指向全局变量window的,然后我们里面其实是想获取外边的一些东西的,这样我们就需要利用闭包的特性,在外边声明一个变量 that,这样里面就可以通过that的传递就可以获取到一些参数。

var that = this;

这是一种经典做法。

文字上下滚动的效果

原理是