如何正确编码要异步加载的函数

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);