访问全局变量和异步问题
Accessing global variable and asynchronous issue
下面是一些我刚刚开始工作的代码(一个角色生成器实验)。我想能够点击一个按钮,并改变画布元素的位置,但我遇到了一些问题。
在点击事件功能上的按钮我console.log out canvasTop…
console.log(this.canvasTop);
…然而,它是没有定义的。我可以在代码的其他任何地方访问变量,除了在这个点击事件函数中。为什么会这样?
另一件事是接下来的两行…
this.canvasTop += 10;
AvatarGenerator.canvas();
…在第一行中,我想迭代canvasTop值,在第二行中调用绘制画布的函数。然而,似乎第二行在第一行之前运行(是的,JS是异步的,我知道),这意味着画布元素不会移动,直到下次我点击按钮。我怎么解决这个问题?
提前感谢!
代码:
AvatarGenerator = {
canvasTop: 50,
canvasLeft: 50,
canvas: $('#canvas')[0],
context: canvas.getContext('2d'),
init: function() {
AvatarGenerator.canvas();
AvatarGenerator.toolBox();
},
canvas: function() {
console.log(this.canvasTop); // <-- 50
this.context.beginPath();
this.context.moveTo(this.canvasLeft, this.canvasTop);
this.context.lineTo(300, 300);
this.context.stroke();
},
toolBox: function() {
var moveLeftBtn = $('#moveLeftBtn');
moveLeftBtn.on('click', function(){
console.log(this.canvasTop); // <-- undefined, why?
this.canvasTop += 10;
AvatarGenerator.canvas();
});
}
};
单击处理程序在不同的上下文中被调用,因此this
不再指向您的对象。
试试这个:
var self = this;
moveLeftBtn.on('click', function(){
console.log(self.canvasTop);
self.canvasTop += 10;
AvatarGenerator.canvas();
});
或者,对于现代浏览器,你可以将你的对象绑定到你的函数,这样你就不需要self
:
moveLeftBtn.on('click', function(){
console.log(this.canvasTop);
this.canvasTop += 10;
AvatarGenerator.canvas();
}.bind(this));
//^^^^^^^^^^ this determines what 'this' in the callback function is pointing to
相关文章:
- JavaScript异步问题
- Meteor:异步回调问题
- 异步中的回调函数出现问题'张贴'
- 用于异步函数中的循环和定时问题
- 在Node.js中使用异步模块时出现问题
- Node.js-异步方法调用问题
- javasctipt-返回值的异步问题
- Node JS异步承诺.所有问题
- 直接 Web 远程处理异步问题
- 嵌套异步函数未及时返回数据的问题
- Javascript奇怪的行为,异步问题
- AngularJS:下载二进制图像时出现异步问题
- 异步加载问题
- javascript异步和twitter的问题
- Node.js:异步代码 + js 闭包的问题
- 异步退出节点域时出现问题
- 异步 JavaScript 问题
- 请求Javascript/Angular遇到异步问题
- Javascript问题(异步调用)
- Node.js get请求问题(异步问题?)