如果在aclass定义中定义了setTimeout（this.doAnimation，1000）将失败 [英] setTimeout(this.doAnimation, 1000) will fail if it is defined in aclass definition
问题描述
我做了一些动画使用
var oDiv = {};
oDiv.x = 100;
oDiv.y = 100;
oDiv.node = document.getElementById（''divImage''）;
oDiv.node.style.position =" absolute";
oDiv.doAnimation = function（）{
oDiv.x + = 1;
oDiv.y + = 1;
oDiv.node.style.top = oDiv.y +''px'';
oDiv.node.style.left = oDiv.x +''px'';
setTimeout（oDiv.doAnimation，33）;
}
它运行正常。当它改为传统类
定义时，则失败：
函数动画（）{
this.x = ...
等...
this.doAnimation = function（）{
//做点什么
//设置延迟
setTimeout（this.doAnimation，33）;
}
}
oDiv = new Animation（）;
oDiv.doAnimation（）;
将失败。第二次调用doAnimation（）时，它似乎没有这个概念，等等。
它如果我使用更流行的定义类的方法是相同的
将函数移出：
函数动画（）{
this .x = ...
等...
}
Animation.prototype.doAnimation = function（）{
//做点什么
}
和它是相同的，第二次是由
$ b调用doAnimation（） $ b的setTimeout，它没有this.x的概念。
有人知道它是什么吗？嗯......我不需要使用prototype.js
并使用类似doAnimation.bind（this）的东西？它可以是一个不包含其他框架的自我包含的脚本吗？谢谢。
liketofindoutwhy meinte：
它运行正常。当它改为传统类
定义时，它就会失败：
JS中没有类。
< blockquote class =post_quotes>
>
函数动画（）{
this.x = ...
等...
this.doAnimation = function（）{
//做点什么
// set延迟
setTimeout（this.doAnimation，33）;
}
}
oDiv =新动画（）;
oDiv.doAnimation（）;
将失败。第二次调用doAnimation（）时，它似乎没有this.x等概念。
[snip]
有人知道它是什么吗？
您需要一个闭包。谷歌javascript关闭并且阅读。
你最终会得到类似
var = this;
.. ..
window.setTimeout（that.doAnimation，33）;
Gregor
-
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com :::Bildagenturfürdenalpinen Raum
Gregor Kofler写道：
liketofindoutwhy meinte：
> ; function Animation（）{
this.x = ...
等...
this.doAnimation = function（）{
//做某事
//设置延迟
setTimeout（this.doAnimation，33）;
}
}
oDiv = new Animation（）;
oDiv.doAnimation（）;
失败。第二次调用doAnimation（）时，它似乎没有this.x等的概念。
[ snip]
有人知道它是什么吗？
你需要一个闭包。谷歌javascript关闭并且阅读。
你最终会得到类似
var = this;
.. 。
window.setTimeout（that.doAnimation，33）;
应该是
window.setTimeout（function（）{that.doAnimation（）}，33）;
，因为你的代码中的方法失去了与'that''的连接（作为另一个Function对象引用传递给
）和它的<中的'this'' br />
执行上下文将再次引用Window或Global Object。
PointedEars
-
var bugRiddenCrashPronePieceOfJunk = （
navigator.userAgent.indexOf（''MSIE 5''）！= -1
&& navigator.userAgent.indexOf（'''Mac''） ！= -1
）// Plone，register_function.js：16
托马斯''PointedEars''Lahn meinte：
Gregor Kofler写道：
> window.setTimeout（ that.doAnimation，33）;
应该是
window.setTimeout（function（）{that.doAnimation（）}，33）;
哎呀。抱歉。我的错。我的版本完全_not_创建一个闭包。
Gregor
-
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur f ?? r den alpinen Raum
I did some animation using
var oDiv = {};
oDiv.x = 100;
oDiv.y = 100;
oDiv.node = document.getElementById(''divImage'');
oDiv.node.style.position = "absolute";
oDiv.doAnimation = function() {
oDiv.x += 1;
oDiv.y += 1;
oDiv.node.style.top = oDiv.y + ''px'';
oDiv.node.style.left = oDiv.x + ''px'';
setTimeout(oDiv.doAnimation, 33);
}
and it works fine. When it is changed to the traditional class
definition, then it fails:
function Animation() {
this.x = ...
etc...
this.doAnimation = function() {
// do something
// set delay
setTimeout(this.doAnimation, 33);
}
}
oDiv = new Animation();
oDiv.doAnimation();
which will fail. The second time when the doAnimation() is called, it
seems that it doesn''t have a concept of this.x, etc.
It is the same if I use the more popular way of defining a class by
moving the function out:
function Animation() {
this.x = ...
etc...
}
Animation.prototype.doAnimation = function() {
// do something
}
and it is the same, the second time when doAnimation() is invoked by
the setTimeout, it doesn''t have a concept of this.x.
Does someone know what it is? hm... I don''t need to use prototype.js
and use something like doAnimation.bind(this) ? Can it be a self-
contained script that doesn''t rely on other framework? Thanks.
liketofindoutwhy meinte:
and it works fine. When it is changed to the traditional class
definition, then it fails:There are no classes in JS.
>
function Animation() {
this.x = ...
etc...
this.doAnimation = function() {
// do something
// set delay
setTimeout(this.doAnimation, 33);
}
}
oDiv = new Animation();
oDiv.doAnimation();
which will fail. The second time when the doAnimation() is called, it
seems that it doesn''t have a concept of this.x, etc.[snip]
Does someone know what it is?You need a closure. Google "javascript closure" and read.
You will eventually end up with something like
var that = this;
....
window.setTimeout(that.doAnimation, 33);
Gregor
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Gregor Kofler wrote:liketofindoutwhy meinte:>function Animation() {
this.x = ...
etc...
this.doAnimation = function() {
// do something
// set delay
setTimeout(this.doAnimation, 33);
}
}
oDiv = new Animation();
oDiv.doAnimation();
which will fail. The second time when the doAnimation() is called, it
seems that it doesn''t have a concept of this.x, etc.
[snip]
Does someone know what it is?
You need a closure. Google "javascript closure" and read.
You will eventually end up with something like
var that = this;
...
window.setTimeout(that.doAnimation, 33);Should be
window.setTimeout(function() { that.doAnimation() }, 33);
because with your code the method loses its connection to `that'' (being
passed as just another Function object reference) and `this'' in its
execution context will again refer to the Window or Global Object instead.
PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf(''MSIE 5'') != -1
&& navigator.userAgent.indexOf(''Mac'') != -1
) // Plone, register_function.js:16
Thomas ''PointedEars'' Lahn meinte:Gregor Kofler wrote:
>window.setTimeout(that.doAnimation, 33);
Should be
window.setTimeout(function() { that.doAnimation() }, 33);Oops. Sorry. My bad. My version does exactly _not_ create a closure.
Gregor
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur f??r den alpinen Raum
这篇关于如果在aclass定义中定义了setTimeout（this.doAnimation，1000）将失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
