JavaScript，永无止境的循环，在调试器，ElementFrompoint()中正常工作

Question

我正在尝试在完整的JS，Whit撤消和轮子选择中实现拖放。

我在一个非常特殊的情况下遇到一个奇怪的问题：

var elementTemp = document.elementFromPoint(startx, starty);
if (elementTemp !== null) {
    var array=[];
    array.lenght=0;
    var visibilitys=[];
    var cpt=0;
    //getting all the elements under the mouse in visibilitys
    while (elementTemp!==document.documentElement){
        console.log(elementTemp);
        visibilitys[cpt]=elementTemp.style.visibility;
        array[cpt]=elementTemp;
        elementTemp.style.visibility = "hidden";
        elementTemp = document.elementFromPoint(startx, starty);
        cpt++;
        array.lenght++;
    }

当我在结果计数号上使用Google搜索页面中的脚本时(Environ 12 700Résultats(0,70秒((在此页面：

https://www.google.fr/search?q=sdfh&oq = sdfh＆amp;Aqs = Chrome..69I57J0L5.743J0J0J8＆am

while集团永无止境。控制台打印无限：

<div id="resultStats" style="visibility: hidden;">Environ 132&nbsp;000&nbsp;résultats<nobr> (0,46&nbsp;secondes)&nbsp;</nobr></div>

但是，如果我暂停脚本(在调试器中输入我的脚本(，则可以正常工作(elementTemp更改直到退出时(;

有人了解吗？(我正在使用Chrome(。

这是完整的片段：(要输入Dragmod，在控制台中键入ActivedRag((

var handlerMove;
var handlerUp;
var handlerExecOnce;
var handlerWheel;
var modified=[];
var selector=0;
var truebase;
var offx;
var offy;
var element;
var startx;
var starty;
var masque;
var ctx;
var masqueStyle='rgba(0, 0, 255, 0.3)';
function moveTo(x, y, element) {
    element.style.left = x + "px";
    element.style.top = y + "px";
}
function activeDrag() {
    //debugger;
    window.addEventListener('mousedown', dragmod, true)
    masque = document.createElement("CANVAS");
    masque.style.display="none";
    masque.style.position="absolute";
    document.documentElement.appendChild(masque);
    ctx=masque.getContext("2d");
    return 'dragmod on'
    //debugger;
}
function dragmod(event) {
    //debugger;
    console.log('mousedown')
    startx=event.clientX;
    starty=event.clientY;
    var elementTemp = document.elementFromPoint(startx, starty);
    if (elementTemp !== null) {
        //debugger;
        //element.style.position = 'absolute';// à changer
        
        
       //récuperation de l'élément le plus "en dessous"
        var array=[];
        array.lenght=0;
        var displays=[];
        var cpt=0;
        while (elementTemp!==document.documentElement){
             //debugger;
            console.log(elementTemp);
            displays[cpt]=elementTemp.style.visibility;
            array[cpt]=elementTemp;
            
            elementTemp.style.visibility = "hidden";
            elementTemp = document.elementFromPoint(startx, starty);
            cpt++;
            array.lenght++;
        }
        for (var i=0; i<cpt ; i++){
            array[i].style.visibility = displays[i];
        }
        
        //select the good one; first by defautl
        element=array[0];
        lightUp(element);
        
        handlerWheel=function (e){
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            wheelController(e,array);
            
        }
        window.addEventListener('wheel',handlerWheel);
    
        //console.log(element);
      
        
    
        handlerUp=function (e){
            /*if (element.style.left !== beforex || element.style.top !=beforey){//@todo pas passer tout l'élement (lourd)
                obj={
                    elemref:element,
                    x:beforex,
                    y:beforey
                }
                modified.push(obj);
            }*/
            listenMouseUp(e);
            e.stopPropagation();//todo marche pas
            e.preventDefault();
            e.stopImmediatePropagation;
        }
        handlerExecOnce=function (event){
            executeOnce(event);
      
            //console.log(modified);
        }
        window.addEventListener('mousemove',handlerExecOnce,true)
        window.addEventListener('mouseup', handlerUp,true);
        document.addEventListener('keydown', keyController);
        
    }
}
function listenMouseMove(event, offx, offy) {
    //debugger;
    console.log('mousemove')
    moveTo(event.clientX + offx, event.clientY + offy, element);
}
function listenMouseUp(event) {
    //debugger;
    console.log('mouseup');
    window.removeEventListener('mousemove', handlerMove);
    window.removeEventListener('mouseup', handlerUp,true);
    window.removeEventListener('mousemove', handlerExecOnce,true);
    element.removeEventListener('click',eventStopper,true);
    document.removeEventListener('onkeypress',keyController);
    lightDown(element);
}
function closeDragmod() {
    window.removeEventListener('mousedown', dragmod);
    return 'dragmod off';
}
function eventStopper(e){
    e.stopPropagation();
    e.preventDefault();
}
function undo(){
    console.log('undo');
    //debugger;
    var obj = modified.pop();
    if (obj!=null){
        obj.elem.left=obj.ancientx;
        obj.elem.top=obj.ancienty;
        moveTo(obj.ancientx,obj.ancienty,obj.elem);
        obj.elem.style.position=obj.position;
        //peut etre remettre aussi l'ancienne position??
    }
}
function getFirstScrollable(elem){
    var parent=elem.parentElement
    while (parent!==window){
    }
}
function executeOnce(event){
    var xcomp=startx-event.clientX;
    var ycomp=starty-event.clientY;
    if (Math.sqrt(xcomp*xcomp+ycomp*ycomp)>10){
        //attaching normal mouseevent
        handlerMove=function (e){
                listenMouseMove(e, offx+window.scrollX-truebase.x, offy+window.scrollY-truebase.y);
                e.preventDefault();
            }
        
        window.addEventListener('mousemove',handlerMove);
        
        element.addEventListener('click', eventStopper,true);
        lightDown(element);
        window.removeEventListener('wheel',handlerWheel);
        truebase=getTrueBase(element);
    //debugger;
    
        var obj={
            elem:element,
            basex:truebase.x,
            basey:truebase.y,
            ancientx:element.offsetLeft,
            ancienty:element.offsetTop,
            position:element.style.position
        }
        var elementRectangle = element.getBoundingClientRect();
        offx = elementRectangle.left - event.clientX;
        offy = elementRectangle.top - event.clientY;
        modified.push(obj);
        element.style.position='absolute';// necessaire? relative?
        window.removeEventListener('mousemove', handlerExecOnce,true);
        }
}
function keyController(e){
    if(event.keyCode == 90 && event.ctrlKey){
        undo();
    }
}
function wheelController(e,array){
    lightDown(element);
    if (e.deltaY<0){
        if (selector<array.lenght-1){
            selector++;
        }
    }
    else if (selector>0){
        selector--;
    }
    element=array[selector];
    lightUp(element);
    
}
function getTrueBase(elem){
    var basex=0;
    var basey=0;
    elem=elem.offsetParent;
    while (elem){
        basex+=elem.offsetLeft
        basey+=elem.offsetTop
        elem=elem.offsetParent
    }
    return {
        x:basex,
        y:basey
    }
}
function lightUp(htmlElement){//adding transparent mask
    //debugger;
    var elementRectangle = htmlElement.getBoundingClientRect();
    console.log("lighting up", htmlElement.offsetLeft,masque);
    moveTo(elementRectangle.left+window.scrollX,elementRectangle.top+window.scrollY, masque);
    var w= elementRectangle.width;
    var h= elementRectangle.height;
    masque.width  = w;
    masque.height = h;
    ctx.fillStyle=masqueStyle;// si je fais pas ça, le context style se détruit quand je change la taille todo pk?
    ctx.fillRect(0, 0, w, h);
    masque.style.display="inline";
    
}
function lightDown(htmlElement){
    masque.style.display="none";
    
}

Answer 1

可能需要给浏览器时间应用style.visibility = "hidden";更改。

您可以尝试添加该行的hack

void elementTemp.offsetWidth;

更改可见性后，或者在切换到某种 requestAnimationFrame'loop`而不是while loop中。