2017-12-12 1 views
-1

Was ich versuche zu erreichen, ist in der Lage, eine Zusage zu verwenden, wenn Sie überprüfen, ob ein Element derzeit im DOM ist. Meine Idee ist es, weg von setTimeOut, aber wirklich window.requestAnimationFrame ist genau das gleiche wie setTimeOut nur ein wenig mehr performant.Warten auf ein Element im DOM mit Versprechen oder Generatorfunktionen

const doCheck = function(selector){ 
    if (document.querySelector(selector) === null) { 
     window.requestAnimationFrame(function() { 
      doCheck(selector); 
     }); 
    } else { 
     return true; 
    } 
}; 

export default function checkElement(selector) { 
    return new Promise(res => { 
     doCheck(selector); 
     res(true); 
    }) 
} 

Aber natürlich nicht funktionieren kann, ist das Hauptproblem die Tatsache, dass Sie eine andere Funktion aufrufen, wenn der Wähler nicht da ist, wie kann ich das mit dem Versprechen, kapseln? Scheint so zu sein, dass du sowas nicht tun kannst.

+0

Warum versuchen Sie diese Informationen aus dem DOM zu bekommen? Der Code, mit dem das Element zum DOM hinzugefügt wird, sollte Ihnen dieses Versprechen geben. – Bergi

Antwort

1

Ihre doCheck Funktion asynchron ist aber weder einen Rückruf nimmt noch ein Versprechen zurückgibt. Das Versprechen innerhalb checkElement wird sofort gelöst.

@ Amit Antwort zeigt, wie um einen Rückruf passieren (und es verwendet, anstatt return), hier ist, wie es mit dem Versprechen richtig zu machen:

function rafAsync() { 
    return new Promise(resolve => { 
     requestAnimationFrame(resolve); 
    }); 
} 

export default function checkElement(selector) { 
    if (document.querySelector(selector) === null) { 
     return rafAsync().then(() => checkElement(selector)); 
    } else { 
     return Promise.resolve(true); 
    } 
} 

Da Sie über Generatorfunktionen sprechen, ich nehme an, Sie möchte async/await verwenden. Sie können, dass rekursiv tun:

export default async function checkElement(selector) { 
    if (document.querySelector(selector) === null) { 
     await rafAsync(); 
     return checkElement(selector); 
    } else { 
     return true; 
    } 
} 

Oder iterativ:

export default async function checkElement(selector) { 
    while (document.querySelector(selector) === null) { 
     await rafAsync() 
    } 
    return true; 
} 
+0

Brain Furz Zeit von mir ... Ich lief ein Kaninchenloch und konnte einfach nicht für das Leben von mir etwas arbeiten lol, also danke dir: D –

0

Sie können es senden Sie Ihre Entschlossenheit Funktion und rufen Sie, wenn Sie

const doCheck = function(selector,resolve){ 
 
    if (document.querySelector(selector) === null) { 
 
     window.requestAnimationFrame(function() { 
 
      doCheck(selector,resolve); 
 
     }); 
 
    } else { 
 
     resolve(true); 
 
    } 
 
}; 
 

 

 
export default function checkElement(selector) { 
 
    return new Promise(res => { 
 
     doCheck(selector,res); 
 
     
 
    }) 
 
}

0
doCheck(selector); 
    res(true); 

So auf der Linie einer der oben Abschluss Polling für den Start Element.

Dann lösen Sie sofort das Versprechen.

Das wird nicht funktionieren.

Sie müssen das Versprechen nur lösen, wenn Sie das Element gefunden haben!

das heißt auf dieser Linie:

return true; 
Verwandte Themen