jQuery 插件、上下文和 setTimeout
我正在为 jQuery 编写一个插件，但 javascript 中的上下文问题让我头脑一团糟。
这是我的插件的简化版本：
(function($){
$.fn.myplugin = function(options){
return new MyPlugin(this, options);
};
function MyPlugin(el, o )
{
this.root = el;
this.input_box = el.find('#the_input');
this.map = null;
this.timeout = null;
var self = this;
self.input_box.keyup( function(){
if( self.timeout!==null )
{
clearTimeout( self.timeout );
}
self.timeout = setTimeout( function(){
self.search_address( self );
}, 500 );
});
}
MyPlugin.prototype = {
search_address : function( context ){
geocoder.geocode({'address':$('#direction').val()},
function( results, status ){
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
var latlng = new google.maps.LatLng( lat, lng );
context.select_address( latlng, '' );
},
select_address : function( latlng, text ){
self.root.find('#url').val('http://maps.google.com/?q='+encodeURI($('#direccion').val())+'&ll='+coords.lat()+','+coords.lng()+'&ie=UTF8&oe=UTF8&z=18');
}
};
})(jQuery);
我读到 setTimeout 将上下文设置为全局对象，因此我执行了闭包以便能够将上下文传递给 search_address 函数。这允许我从 geocode 函数的回调中调用 select_address，但此回调正在调用 select_address 并且上下文再次是不需要的：
我完全不知道如何处理上下文，我认为在“对象”初始化时使用 var self=this 可以避免这些问题......
我必须注意>select_address 可以直接调用...
I'm writing a plugin for jQuery and I have a mess in my head with the context issue in javascript.
This is a simplified version of my plugin:
(function($){
$.fn.myplugin = function(options){
return new MyPlugin(this, options);
};
function MyPlugin(el, o )
{
this.root = el;
this.input_box = el.find('#the_input');
this.map = null;
this.timeout = null;
var self = this;
self.input_box.keyup( function(){
if( self.timeout!==null )
{
clearTimeout( self.timeout );
}
self.timeout = setTimeout( function(){
self.search_address( self );
}, 500 );
});
}
MyPlugin.prototype = {
search_address : function( context ){
geocoder.geocode({'address':$('#direction').val()},
function( results, status ){
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
var latlng = new google.maps.LatLng( lat, lng );
context.select_address( latlng, '' );
},
select_address : function( latlng, text ){
self.root.find('#url').val('http://maps.google.com/?q='+encodeURI($('#direccion').val())+'&ll='+coords.lat()+','+coords.lng()+'&ie=UTF8&oe=UTF8&z=18');
}
};
})(jQuery);
I've read that setTimeout sets the context to the global object, so I did the closure to be able to pass the context to search_address function. This allowed me to call select_address from the callback in geocode function, but this callback is calling select_address and there the context is again undesired: self.root is not found.
I'm completly lost at how to handle the context, I though that using the var self=this at the initialization of the "object" I would avoid these problems...
I must note that select_address can be called directly...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
此时使用
this来引用当前上下文：Use
thisat that point to refer to the current context:我刚刚发现一些很酷的东西可以修复 jQuery 1.4+ 中的 SetTimeout 上下文。
您可以使用 jQuery.proxy 来解决上下文问题。
这是我的代码：
Application = function() { this.AMethod = function(){}; setTimeout($.proxy(this.AMethod,this), 100); }超时后，执行 Application.AMethod ，因此“Application”上下文被维护为
LE：
或者，如果您不希望您的插件仅限于 jQuery 1.4+，您可以非常简单地创建自己的代理函数：
function proxy(func, context) { return function(){ return func.apply(context, arguments);} }I just found out something cool that fixes the SetTimeout context in jQuery 1.4+.
You can use the jQuery.proxy to solve the context issue.
Here is my code:
Application = function() { this.AMethod = function(){}; setTimeout($.proxy(this.AMethod,this), 100); }After the timeout, the Application.AMethod is executed and thus the "Application" context is maintained
LE:
Alternativelly you can create your own proxy function very simply if you don't want your plugin limited only to jQuery 1.4+ :
function proxy(func, context) { return function(){ return func.apply(context, arguments);} }