Creating Promises
This fiddle will show how to create promises out of more than just a console.log call
by Matt Rummler
HTML
<div class='contentcontainer'>
<input id="contentEnter" placeholder="type here" class='text-input'>
<article id="mainContent" class='content-area'>
</article>
</div>
CSS
.contentcontainer
{
width: 95%;
height: 100%;
}
.text-input
{
width: 70%;
margin: 0 auto;
}
.content-area
{
width: 100%;
}
JavaScript
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.innerHTML = `
function controlAccessToEditable()
{
var contentElement = document.getElementById('mainContent').innerText = 'You may not change this text yet.'
window.contentEditReady = false;
let stupid = function()
{
return new Promise((resolve, reject)=>
{
document.getElementById('mainContent').innerText = 'You may now change this text!';
window.contentEditReady = true;
if(window.contentEditReady){resolve();}else{reject();}
});
};
setTimeout(stupid,6000);
alert('The controlAccessToEditable function has finished');
}
`;
///////////////////////////////////////////////////////
// API = https://developers.google.com/web/fundamentals/getting-started/primers/promises#promise-api-reference
//////////////// ACCORDING TO THE API //////////////////
// The below might be a thenable
// I haven't been able to determine what the .then is required to do though... (I mean not really)
let thenAbleFunction = function()
{
let then = (callbackSuccess,callbackFail)=>{callbackSuccess();};
};
//////////////// PROMISE CALLBACK //////////////////
////// So all Promises either define an anonyous function or you can create one
///// apparently they must take two arguments, resolve & reject
/// reject is called, returning an error object, if things fail
// resolve is called if the Promise is fullfilled... apparently meaning if the work to be done was done without generating errors
// BELOW IS AN ATTEMP AT MAKING A CALLBACK
let uploadScript =function(resolve, reject)
{
let returnResult = null;
//Asynch code goes here
// but can I safely put more than one async call here or not?
// not sure about the try catch, not even how to do it
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch
try
{
returnResult =...