Как правильно кодировать функцию для асинхронной загрузки

Question

Я пытаюсь заставить случайную цветовую функцию загружаться быстрее. в настоящее время страница загружает все на странице, прежде чем она загружает случайный цвет div в заголовок. функция работает, но для ее загрузки требуется много времени. ниже приведен текущий код для функции случайного цвета.

в теле тега есть:

onload="return ran_col()" style="!important;"

в теле есть div с последующим скриптом:

<div id="parallelogram" class="desktop-6 tablet-4 mobile-3">
<div id="logo" class="desktop-6 tablet-4 mobile-3">
<a href="/"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" style="border: 0;"></a>
</div>
</div>
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['81ADB5','97C29D','E86A72','F1B36C', 'A37EA3', '277F92'];
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('parallelogram').style.background = color; }
</script>

я пытаюсь объединить эту функцию с setTimeout() поэтому страница загружает случайный цвет div сразу. ниже приведен пример, который я нашел в статье о том, как ускорить ваш JavaScript:

var a = 3, b = 5;
function addNumbers (a, b) { 
return (a+b);
}
// this will run the code immediately
setTimeout('var c = addNumbers(a,b)', 1);
console.log(c);

Я пробовал несколько конфигураций, но я новичок в javascript и мне не повезло в достижении этого. какие-либо предложения о том, как правильно это настроить? Любой совет будет принята с благодарностью. заранее спасибо.

Answer 1

Вы просто подразумеваете свою функцию в setTimeout:

 function ran_col() { //function name
    var color = '#'; // hexadecimal starting symbol
    var letters = ['81ADB5','97C29D','E86A72','F1B36C', 'A37EA3', '277F92'];
    color += letters[Math.floor(Math.random() * letters.length)];
    document.getElementById('parallelogram').style.background = color; }

setTimeout(ran_col,1);