将 object.watch 合并到当前脚本中？使困惑
更新了问题和答案！
原始问题
我一直在查看 Eli 的 object.watch (https://gist.github.com/384583) 脚本，我理解它的想法和它的作用，但我很困惑关于我如何在我的脚本中实际使用它！即使这对大多数人来说似乎很明显，我只是没有看到它：S
我什至可能完全尝试错误的方法，而 object.watch 并不是我实际需要使用的！
我这里有一个脚本：
<script type="text/javascript">
jQuery.fn.elementlocation = function() {
var curleft = 0;
var curtop = 0;
var obj = this;
do {
curleft += obj.attr('offsetLeft');
curtop += obj.attr('offsetTop');
obj = obj.offsetParent();
} while ( obj.attr('tagName') != 'BODY' );
return ( {x:curleft, y:curtop} );
};
$(document).ready( function() {
$("#gdimage").mousemove( function( eventObj ) {
var location = $("#gdimage").elementlocation();
var x = eventObj.pageX - location.x;
var y = eventObj.pageY - location.y;
x = x / 5;
y = y / 5;
x = (Math.floor( x ) + 1);
y = (Math.floor( y ) + 1);
if (y > 1) {
block = (y * 200) - 200;
block = block + x;
} else {
block = x;
}
x = ((x * 2) + (x*3)) - 4;
y = ((y * 2) + (y*3)) - 4;
x = (Math.floor( x ));
y = (Math.floor( y ));
$("#block").text( block );
$("#x_coords").text( x );
$("#y_coords").text( y );
$.ajax({
type: "GET",
url: "fetch.php",
data: "x=" + x + "&y=" + y + "",
dataType: "json",
async: false,
success: function(data) {
$("#user_name_area").html(data.username);
}
});
$("#gdimage").click( function( eventObj ) {
window.location = "/redirect/?x=" + x + "?y=" + y + "";
});
});
});
</script>
现在您可以看出，随着鼠标移动不断通过 AJAX 从 fetch.php 页面调用数据，服务器负载将会相当高。所以，我想做的只是当变量“block”改变它的值时调用AJAX。
所以我假设，我必须在某个地方存储一个值，然后当值发生变化时用存储的值检查它，但是当然，存储的值也总是会更改为新值，因为它都是由不断变化的变量决定的？
答案
看来我想使用 object.watch 采取了错误的方法 - 在 SitePoint 的 paul_wilkins 的帮助下，他向我展示了一种使用 jQuery 数据存储信息的方法（http://api.span.cn）。 jquery.com/data）。也简化了我的方程哈哈
这是新代码：
<script type="text/javascript">
jQuery.fn.elementlocation = function() {
var curleft = 0;
var curtop = 0;
var obj = this;
do {
curleft += obj.attr('offsetLeft');
curtop += obj.attr('offsetTop');
obj = obj.offsetParent();
} while ( obj.attr('tagName') != 'BODY' );
return ( {x:curleft, y:curtop} );
};
$(document).ready( function() {
$("#gdimage").mousemove( function( eventObj ) {
var location = $("#gdimage").elementlocation();
var x = eventObj.pageX - location.x;
var y = eventObj.pageY - location.y;
x = x / 5;
y = y / 5;
x = (Math.floor( x ) + 1);
y = (Math.floor( y ) + 1);
block = x + (y * 200) - 200;
x = ((x * 2) + (x*3)) - 4;
y = ((y * 2) + (y*3)) - 4;
x = (Math.floor( x ));
y = (Math.floor( y ));
$("#block").text( block );
$("#x_coords").text( x );
$("#y_coords").text( y );
if (block != $('#gdimage').data('storedBlock')) {
$.ajax({
type: "GET",
url: "fetch.php",
data: "x=" + x + "&y=" + y + "",
dataType: "json",
async: false,
success: function(data) {
$("#user_name_area").html(data.username);
}
});
}
$('#gdimage').data('storedBlock', block);
$("#gdimage").click( function( eventObj ) {
window.location = "/redirect/?x=" + x + "&y=" + y + "";
});
});
});
</script>
UPDATED QUESTION WITH ANSWER!!
Original Question
I've been looking at Eli's object.watch (https://gist.github.com/384583) script and I understand the idea of it and what it does but I'm so confused about how I actually use it in my script! Even if this seems quite obvious to most, I'm just not seeing it :S
I might even be trying the wrong approach to it entirely and object.watch isn't what I actually need to be using!
I've got a script here:
<script type="text/javascript">
jQuery.fn.elementlocation = function() {
var curleft = 0;
var curtop = 0;
var obj = this;
do {
curleft += obj.attr('offsetLeft');
curtop += obj.attr('offsetTop');
obj = obj.offsetParent();
} while ( obj.attr('tagName') != 'BODY' );
return ( {x:curleft, y:curtop} );
};
$(document).ready( function() {
$("#gdimage").mousemove( function( eventObj ) {
var location = $("#gdimage").elementlocation();
var x = eventObj.pageX - location.x;
var y = eventObj.pageY - location.y;
x = x / 5;
y = y / 5;
x = (Math.floor( x ) + 1);
y = (Math.floor( y ) + 1);
if (y > 1) {
block = (y * 200) - 200;
block = block + x;
} else {
block = x;
}
x = ((x * 2) + (x*3)) - 4;
y = ((y * 2) + (y*3)) - 4;
x = (Math.floor( x ));
y = (Math.floor( y ));
$("#block").text( block );
$("#x_coords").text( x );
$("#y_coords").text( y );
$.ajax({
type: "GET",
url: "fetch.php",
data: "x=" + x + "&y=" + y + "",
dataType: "json",
async: false,
success: function(data) {
$("#user_name_area").html(data.username);
}
});
$("#gdimage").click( function( eventObj ) {
window.location = "/redirect/?x=" + x + "?y=" + y + "";
});
});
});
</script>
Now as you can tell, the server load will be pretty high with the mouse move constantly calling data from the fetch.php page through AJAX. SO, what I'm trying to do is only call upon the AJAX when the variable "block" changes it's value.
So I assume, I have to somewhere store a value, and then when the value changes check it with the stored value, but of course, the stored value will always change to the new value too since it's all determined by constantly changing variables?
ANSWER
It appears I was taking the wrong approach by wanting to use object.watch - with help from paul_wilkins over at SitePoint, he showed me a method to store information using jQuery data (http://api.jquery.com/data). Also simplifying my equation too haha
Here is the new code:
<script type="text/javascript">
jQuery.fn.elementlocation = function() {
var curleft = 0;
var curtop = 0;
var obj = this;
do {
curleft += obj.attr('offsetLeft');
curtop += obj.attr('offsetTop');
obj = obj.offsetParent();
} while ( obj.attr('tagName') != 'BODY' );
return ( {x:curleft, y:curtop} );
};
$(document).ready( function() {
$("#gdimage").mousemove( function( eventObj ) {
var location = $("#gdimage").elementlocation();
var x = eventObj.pageX - location.x;
var y = eventObj.pageY - location.y;
x = x / 5;
y = y / 5;
x = (Math.floor( x ) + 1);
y = (Math.floor( y ) + 1);
block = x + (y * 200) - 200;
x = ((x * 2) + (x*3)) - 4;
y = ((y * 2) + (y*3)) - 4;
x = (Math.floor( x ));
y = (Math.floor( y ));
$("#block").text( block );
$("#x_coords").text( x );
$("#y_coords").text( y );
if (block != $('#gdimage').data('storedBlock')) {
$.ajax({
type: "GET",
url: "fetch.php",
data: "x=" + x + "&y=" + y + "",
dataType: "json",
async: false,
success: function(data) {
$("#user_name_area").html(data.username);
}
});
}
$('#gdimage').data('storedBlock', block);
$("#gdimage").click( function( eventObj ) {
window.location = "/redirect/?x=" + x + "&y=" + y + "";
});
});
});
</script>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
看来我想使用 object.watch 采取了错误的方法 - 在 SitePoint paul_wilkins 的帮助下，他向我展示了一种使用 jQuery 数据存储信息的方法 (http://api.jquery.com/data)。也简化了我的方程哈哈
这是新代码：
It appears I was taking the wrong approach by wanting to use object.watch - with help from paul_wilkins over at SitePoint, he showed me a method to store information using jQuery data (http://api.jquery.com/data). Also simplifying my equation too haha
Here is the new code: