原创 

关于Javascript setTimeout中的this问题,以及倒计时器的实现源码

分类:    832人阅读    IT小君  2016-03-05 12:00

情景:
function xilou(){ 
	this.name="xilou"; 
	this.sex="男"; 
	this.num=0; 
} 

xilou.prototype.count=function(){ 
	this.num+=1; 
	alert(this.sex+this.num+this.name); 
	alert(this.count)
	var self=this; 
	//setTimeout(function(){self.count();},1000); //D:正确 
	//setTimeout(\'self.count()\',1000)//     can\'t do it
}
var x=new xilou(); 
x.count(); 
问题:

        为什么第一种正确,第二种不行,第二种的self不就相当于x吗?

解析:
        这是有关於javascript变量作用域的问题,setTimeout的作用域是window

         针对与你现在这个具体的代码说明下

        setTimeout(function(){self.count();},1000); //D:正确 
         你在此生成了个匿名函数,在这个函数调用时会逐层的找self这个玩意,由於javascript对作用域的解释,故而能找到你要的self
         setTimeout(\'self.count()\',1000)
        此处给setTimeout的是字符串,其作用域是window,故而找不到self

倒计时器:

        

var Countdown = function(Selector,count,callback){
	this.timeout =count;
	this.modifyObj = $(Selector);
	this.callback = callback;
};
Countdown.prototype.Count = function ()
{
	if(this.timeout<0){ 
		this.callback();
		return;  
	}
	this.modifyObj.text(this.timeout);
	this.timeout--;
	var self =this;
	setTimeout(function(){self.Count()},1000);   
};
倒计时器的使用:

    

var countdown = new Countdown(\'#counttext\',20,function(){
		layer.close(index);
	});
countdown.Count();

点击广告,支持我们为你提供更好的服务

html5图标下拉搜索框自动匹配代码

响应式时尚单品在线商城网站模板

HTML5现代家居装潢公司网站模板

canvas炫酷鼠标移动文字粒子特效

js+css3抽奖转盘旋转点餐代码

小众时尚单品在线电子商务网站模板

响应式太阳能能源公司网站模板

html5 canvas进度条圆环图表统计动画特效

有机水果蔬菜HTML5网站模板

css+js实现的颜色渐变数字时钟动画特效

中小型创意设计服务公司网站模板

css鼠标跟随文字模糊特效

网页设计开发公司网站模板

现代时尚家具公司网站模板

HTML5 Canvas竖直流动线条背景动画特效

html5 svg夜空中星星流星动画场景特效

jQuery右端悬浮带返回顶部特效

html5 canvas彩色碎片组合球形旋转动画特效

HTML5数字产品服务公司网站模板

响应式咖啡饮品宣传网站模板

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务