为了账号安全,请及时绑定邮箱和手机立即绑定

js 封装setInterval问题

js 封装setInterval问题

大话西游666 2018-12-07 03:24:11
想显示导入文件进度,js实现了一个导入耗费时间的效果,但是想将其封装成面向对象的,可是封装之后没有正常运行,js 面向对象能力不够啊,不知道代码是啥原因,setinterval没有间隔时间运行,只运行了一次,请高手指导一下原因,谢谢啦! <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>新增属性值</title> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> </head> <body> <div id="importInfo"></div> <input type="button" onclick="inportProcesser.Start()" value="开始"> <input type="button" onclick="inportProcesser.Close()" value="结束"> <script> function Progresser(intervalms, intervalHandle) { this.intervalMs = intervalms; this. totalIntervalMs = 0; this. timer=null; this.Oninterval = intervalHandle; } Progresser.prototype = { constructor: Progresser, Start: function () { //console.log("Start totalIntervalMs:" + this.totalIntervalMs); this.timer = setInterval( this.IntervalHandle() , this.intervalMs); //console.log("Start timer:" + this.timer); }, Close: function () { //console.log("Close totalIntervalMs:" + this.totalIntervalMs); if (this.timer != null) { //console.log("Close timer:clearInterval pre" + this.timer); clearInterval(this.timer); //console.log("Close timer:clearInterval next" + this.timer); } this.totalIntervalMs = 0; } , IntervalHandle: function () { this.totalIntervalMs += this.intervalMs ; //console.log("IntervalHandle totalIntervalMs:" + this.totalIntervalMs); this.Oninterval(this.totalIntervalMs); //console.log("IntervalHandle timer:" + this.timer); } } var inportProcesser = new Progresser(500, importing2); function importing2(totalIntervalMs) { var second = (totalIntervalMs / 1000.0).toFixed(1); console.log("seconds:" + second + "s.."); } </script> </body> </html>
查看完整描述

3 回答

?
紫衣仙女

TA贡献1839条经验 获得超15个赞

Start: function () {
  //console.log("Start totalIntervalMs:" + this.totalIntervalMs);
  this.timer = setInterval( () => {
    this.IntervalHandle();
  }, this.intervalMs);
  //console.log("Start timer:" + this.timer);
},

这里改成这样就可以了

查看完整回答
反对 回复 2018-12-24
?
慕尼黑5688855

TA贡献1848条经验 获得超2个赞

楼上的解答是正确的,但这是ES6的写法,其实你的问题是一个“js闭包”的问题而已。

解决办法可以先声明一个全局变量

步骤一

var this_ = null;

步骤二

Start: function () {
  //console.log("Start totalIntervalMs:" + this.totalIntervalMs);
  this_ = this;
  this.timer = setInterval( this.IntervalHandle , this.intervalMs);

  /****************************

  说明,问题是你原来是this.IntervalHandle()调用的,但实际上应该是this.IntervalHandle,不需要();

  问题又来了,this.IntervalHandle在setInterval里面单独调用的话那么this.IntervalHandle函数的

  this指向的就是windos对象了。因为setInterval是全局函数。

  ***********************************************/
  //console.log("Start timer:" + this.timer);
},

步骤三

IntervalHandle: function () {
this_.totalIntervalMs += this_.intervalMs ;
  //console.log("IntervalHandle totalIntervalMs:" + this.totalIntervalMs);
  this_.Oninterval(this_.totalIntervalMs);
  //console.log("IntervalHandle timer:" + this.timer);
}

查看完整回答
反对 回复 2018-12-24
?
holdtom

TA贡献1805条经验 获得超10个赞

谢谢,没太看明白,对于闭包一直没理解,js简单的能写,深入的话,尤其是封装的,看着一头雾水啊!

有时间我还是要好好看看那本js高级程序设计,多研究一下开源代码!

查看完整回答
反对 回复 2018-12-24
  • 3 回答
  • 0 关注
  • 946 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号