0 
<html>
    <head>


        <style type="text/css">
            #mycanvas{
                width:500px;
                height:450px;
                border:2px solid green;

                font-size:30px;
            }
        </style>

        <script>
            window.onload = function (){
                vcan = {};
                vcan.main = {}
                vcan.main.repNode = [];
                vcan.main.currentTransform = {'id':0, 'name':'myobj'}

                document.getElementById("mycanvas").addEventListener('mousemove', mymousemove);

                function mymousemove(){
                    var  currAdTime = new Date().getTime();
                    console.log(currAdTime);
                    var myObj = extend(vcan.main.currentTransform , {mdTime:currAdTime, func:'add'})
                    vcan.main.repNode.push(myObj);
                }

              function    extend (fobj, sobj){
                    if((typeof fobj == 'object') && (typeof sobj == 'object')){
                    for(var prop in sobj){
                        fobj[prop] = sobj[prop];
                    }
                        return fobj;
                    }else{
                        alert("it seems that the arguments you passed are not object");
                    }
                }   

                document.getElementById("test").onclick = function (){

                    var output = "";
                    for(var i=0; i< vcan.main.repNode.length; i++){
                        output +=   vcan.main.repNode[i].mdTime;    
                        output += "<br />";

                    }

                    document.getElementById("result").innerHTML = output;

                }

            }
        </script>
    </head>

    <body>
        <div id="mycanvas">
            Please move the mouse inside this box
            And click on Show Result
        </div>

        <button id="test">
            Show Result
        </button>

        <div id="result">

        </div>
    </body>

</html>

为了解决问题，请将以上代码渲染到浏览器中。单击显示结果按钮后，将显示时间。我的问题是为什么所有时间都在显示。

时间的最新值覆盖到对象数组的不同元素中。

同时，如果我们看到控制台，那么时间会有所不同。

经过长时间的搜索，我无法解决这个问题。请大家帮我解决这个问题。

4

3 回答 3

2

这是一个固定的解决方案http://jsfiddle.net/WacV4/1/。JS 中的对象是通过引用而不是通过复制其值来分配的，因此myObjinmymousemove总是修改相同的值。您只需要vcan.main.currentTransform在扩展之前复制。

于 2012-10-03T10:34:23.403 回答
1

只需用这个替换您的扩展功能

function extend(fobj, sobj) {
  if ((typeof fobj == 'object') && (typeof sobj == 'object')) {
    var newfobj = Object();
    for (var prop in fobj) {
      newfobj[prop] = fobj[prop];
    }
    for (var prop in sobj) {
      newfobj[prop] = sobj[prop];
    }
    return newfobj;
  } else {
    alert("it seems that the arguments you passed are not object");
  }
}
于 2012-10-03T10:37:47.767 回答
0

扩展功能出现问题。我不确定建议的输出应该是什么，但从这个函数返回的对象总是有相同的时间。也许你应该返回 sobj 代替？它接缝循环可能没有做你想做的事。我console.log(myObj);在创建之后添加了一个，这表明每次都进入 myObj 的时间相同。如果您需要更多帮助，我建议您在文本中添加您希望的输出。

问候巴勃罗。

于 2012-10-03T10:38:51.590 回答