javascript一串跟隨鼠標(biāo)的div的問(wèn)題：為什么for++效果和for--截然不同

代碼如下：


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<script>
function getPos(ev)
{
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    
    return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}

document.onmousemove=function (ev)
{
    var aDiv=document.getElementsByTagName('div');
    var oEvent=ev||event;
    
    var pos=getPos(oEvent);
    
    for(var i=1; i <aDiv.length;i++)
    {
        aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
        aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    }
    // for(var i=aDiv.length-1;i>0;i--)
    // {
    //     aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
    //     aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    // }
    
    aDiv[0].style.left=pos.x+'px';
    aDiv[0].style.top=pos.y+'px';
};
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

請(qǐng)問(wèn)為何中間那段循環(huán)，用注釋掉的版本來(lái)寫(xiě)（for--）可以有強(qiáng)烈的拖尾效果，用for++效果不明顯，甚至完全沒(méi)效果了。請(qǐng)問(wèn)這是什么原理？

回答

編輯回答

何蘇葉

i++的時(shí)候你是 i[0]==i[1] i[2]==i[1] 這時(shí)候假設(shè)i[0]==5 那么以后的i[n]都是5 然后設(shè)置i[0]等于鼠標(biāo)的位置所以永遠(yuǎn)都是兩個(gè)點(diǎn)
i--的時(shí)候獲取每一個(gè)都是前一個(gè)的位置所以有拖尾效果

2017年9月2日 23:14

編輯回答

別傷我

假設(shè)只有三個(gè) div，初始鼠標(biāo)坐標(biāo)點(diǎn)為(0,0)
i--:
mouse (1,1):

div2=div1=(0,0)
div1=div0=(0,0)
div0=(1,1)

mouse (2,2):

div2=div1=(0,0)
div1=div0=(1,1)
div0=(2,2)

mouse (3,3):

div2=div1=(1,1)
div1=div0=(2,2)
div0=(3,3)

i++:
mouse (1,1):

div1=div0=(0,0)
div2=div1=(0,0)
div0=(1,1)

mouse (2,2):

div1=div0=(1,1)
div2=div1=(1,1)
div0=(2,2)

mouse (3,3):

div1=div0=(2,2)
div2=div1=(2,2)
div0=(3,3)

2018年8月11日 18:25

編輯回答

小曖昧

在我這兒看上去沒(méi)有什么區(qū)別，也許僅僅是瀏覽器渲染的差異

見(jiàn)下面的鏈接

https://jsfiddle.net/yujiaao/...

2017年3月28日 19:29

編輯回答

撥弦

非常感謝@leonleung的答案，
關(guān)鍵點(diǎn)其實(shí)沒(méi)有我想象得那么復(fù)雜，非常簡(jiǎn)單：
循環(huán)體內(nèi)靠前的元素向靠后的元素獲取坐標(biāo)的操作，
在
其后面的元素獲取新坐標(biāo)之前還是之后！
反向循環(huán)時(shí)，后面的元素的舊坐標(biāo)先傳遞給前面的元素，然后才獲取新坐標(biāo)。
正向循環(huán)時(shí)，正好相反。
和js性能完全兩碼事。

用FIFO隊(duì)列直觀解釋如下，但是沒(méi)有原版倒序循環(huán)那么巧妙：

function getMousePos(oEvent) {
    let scrL = document.documentElement.scrollLeft || document.body.scrollLeft;
    let scrT = document.documentElement.scrollTop || document.body.scrollTop;
    return { x: oEvent.clientX + scrL, y: oEvent.clientY + scrT };
}

window.onload = function () {
    for (let i = 0; i < 100; ++i) {
        let oDiv = document.createElement('div');
        oDiv.innerHTML = i;
        oDiv.style.display = 'none';
        document.body.appendChild(oDiv);
    }

    let aDiv = document.getElementsByTagName('div');
    let aPos = new Array(aDiv.length);
    for (let i=0;i<aDiv.length;++i ) {
        aPos[i] = { x: 0, y: 0 };
    }
    console.log(aPos);
    document.onmousemove = function (ev) {
        let oEvent = ev || event;
        let pos = getMousePos(oEvent);
        aPos.pop(); //出隊(duì)列
        aPos.unshift(pos);//進(jìn)隊(duì)列
        for (let i = 0; i < aDiv.length; ++i) {
            aDiv[i].style.left = aPos[i].x + 'px';
            aDiv[i].style.top = aPos[i].y + 'px';
            aDiv[i].style.display = 'block';
        //不再需要專(zhuān)門(mén)指定隊(duì)首隊(duì)尾
        }
    };
};

長(zhǎng)吁一口氣，如釋重負(fù)。
再次感謝leonleung

2017年3月31日 07:30