<p><code>$(document).ready</code>和<code>$.ajax</code>需要<code>jQuery</code></p>
<p><code>fetch</code>和<code>window.addEventListener</code>在几乎所有最新的浏览器中都能工作</p>
<p><code>$(document).ready</code>=><code>window.addEventListener('DOMContentLoaded', function(evt) {})</code></p>
<p><code>$.ajax</code>=><code>fetch</code></p>
<p><strong>注意:</strong>在每个tweet的内部循环中反复调用<code>$(document).ready</code>不是一个好的选择,它会反复运行一系列代码,而<code>setInterval</code>可以在<code>document</code>加载完成后调用一次</p>
<p>content.js</p>
<pre class="lang-js prettyprint-override"><code>async function Request(url = '', data = {}, method = 'POST') {
// Default options are marked with *
const response = await fetch(url, {
method: method, // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': "application/json;charset=utf-8",
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return response.json(); // parses JSON response into native JavaScript objects
}
console.log("Application GO");
function colorChanger() {
let tweets = document.querySelectorAll("article");
tweets.forEach(function (tweet) {
let response = Request("/_api_call", {tweet});
tweet.setAttribute("style", "background-color: red;");
});
}
window.addEventListener('DOMContentLoaded', (event) => {
console.log('Called once after document load');
let timer = setInterval(colorChanger, 2000);
});
</code></pre>