A promise that can be set on an element, to resolve when that element's attributes have changed

attribute-promise.js

** AttrPromise
* @param {element} DOM element. required
* @param {attributeName} String. Optional. Attribute that is expected to change.
* @param {rejectTime} Int. Optional. Seconds (not ms) to wait before rejecting. 0 means there is no reject time.
* @returns {promise}
*/

function attrPromise(element, attributeName,rejectTime = 0) {
	return new Promise((resolve,reject) => {
		let hasChanged = false;
		const observerConfig = {attributes: true,attributeOldValue:true};		
		const observer = new MutationObserver((mutations) => {
			mutations.forEach((mutation) => {
				// if attributeName is given and we have a matching change, disconnect and resolve
				if (attributeName && mutation.attributeName == attributeName) {
					hasChanged = true;
					observer.disconnect();
					resolve(element, element.getAttribute(attributeName));
				}
				
				// no attributeName is given, but some attribute in general changed, disconnect and resolve
				if (!attributeName) {
					hasChanged = true;
					observer.disconnect();
					resolve(element);
				}
			});
		});
		
		// Add a reject time if provided. Doesn't use recurrsion, but should it?
		if (rejectTime > 0) {
			window.setTimeout(()=>{
				if (!hasChanged) {
					reject(element);
				}
			},rejectTime * 100);
		}
		
		if (attributeName) observerConfig.attributeFilter =[attributeName];
		observer.observe(element, observerConfig);
	});
}