javascript - js中this的问题
本文介绍了javascript - js中this的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
先上代码:
;(function(){
var slider = {
$con : $('.slider-item'),
index : 0,
slide : function(index){
this.$con.eq(index).siblings().animate({
opacity : 0
},1600);
this.$con.eq(index).animate({
opacity : 1
},1600);
},
autoShow : function(){
this.index += 1;
if(this.index <= 3 - 1){
slider.slide(this.index);
}else{
this.index = 0;
slider.slide(this.index);
}
setInterval(this.autoShow,5000);
}
}
slider.autoShow();
})();
这是我随手写的一段slider代码。但注意这一段:
if(this.index <= 3 - 1){
slider.slide(this.index);
}else{
this.index = 0;
slider.slide(this.index);
}
中间slider.slide()
我本来想写成this.slide()
,但编译器提示this.slide() is undefined,我不太理解,望各位大大不吝赐教!
解决方案
你这种写法并不推荐,内部不要使用setInterval
,这样会开启多个计时器,用setTimeout
替代吧
//方法1,注意 bind是es5里面的,需要ie10及以上浏览器才支持
setTimeout(this.autoShow.bind(this), 5000);
//方法2,全部兼容,把this代入到闭包中
var self = this;
setTimeout(function(){
self.autoShow()
}, 5000);
//方法3,Arrow Function需要最新的chorme才支持的新语法
setTimeout(()=>this.autoShow(),5000);
这篇关于javascript - js中this的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文