Javascript 将object.watch合并到当前脚本中？困惑的

更新了问题和答案

原始问题

我一直在看伊莱的东西。看https://gist.github.com/384583 脚本，我理解它的想法和它的作用，但我对如何在我的脚本中实际使用它感到困惑！即使这对大多数人来说似乎很明显，我只是没有看到：S

我甚至可能尝试了一种错误的方法来完全和对象。手表不是我真正需要使用的

我这里有一个脚本：

<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页面调用数据，服务器负载将非常高。所以，我只想在变量块改变其值时调用AJAX

所以我假设，我必须在某个地方存储一个值，然后当值发生变化时，用存储的值检查它，但是当然，存储的值也总是会变为新值，因为它是由不断变化的变量决定的

答复

---

看来我使用object.watch的方法是错误的——在SitePoint的paul_wilkins的帮助下，他向我展示了一种使用jQuery数据存储信息的方法http://api.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>

<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>

---

看来我使用object.watch的方法是错误的——在SitePoint的paul_wilkins的帮助下，他向我展示了一种使用jQuery数据存储信息的方法http://api.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>

<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>