隨著前端技術的迅速發展，JavaScript的應用范圍正在不斷擴大，并成為網頁開發中必不可少的技術之一。JavaScript可以用來修改網頁內容、控制頁面交互、動態創建HTML元素等，還有一項非常重要的功能就是等待樣式。本文就會介紹如何在JavaScript中等待樣式的發生，并給出一些實用的案例。 JavaScript等待樣式的方法有很多，比如使用setTimeout、setInterval等方法來檢測樣式是否發生變化，使用DOM事件來檢測元素的屬性是否改變等。其中，使用setTimeout或setInterval的方式比較簡單，具體實現如下：

function waitForStyle(selector, expectedValue, timeout, callback) {
var interval = setInterval(function () {
var element = document.querySelector(selector);
if (element && element.style[expectedValue]) {
clearInterval(interval);
callback();
}
}, timeout);
}

如上代碼所示，我們需要傳入四個參數：selector表示必須的樣式所在的選擇器，expectedValue表示期望的樣式值，timeout表示輪詢樣式的時間間隔，callback表示當檢測到樣式時的回調函數。該方法查找匹配選擇器的第一個元素，檢查其樣式是否滿足期望值，如果是，就清除定時器并執行回調函數。 除了使用setTimeout和setInterval之外，我們還可以使用DOM事件來等待樣式的變化，下面是一個例子：

var element = document.querySelector('.scroll-wrapper');
var observer = new MutationObserver(function () {
var isChanged = element.scrollTop >0;
if (isChanged) {
observer.disconnect();
handleScroll();
}
});
observer.observe(element, {attributes: true, childList: true, subtree: true});

如上代碼所示，我們使用MutationObserver監視.scroll-wrapper元素的scrollTop屬性是否變化。一旦它大于0，MutationObserver會斷開連接并執行handleScroll函數。這種方式相對于使用setTimeout和setInterval來說，具有更快的響應速度。 在實際開發中，我們通常需要等待JavaScript動態創建的DOM元素或者修改的樣式生效。下面是一個例子：

var element = document.createElement('div');
element.classList.add('loading');
document.body.appendChild(element);
setTimeout(function () {
element.classList.remove('loading');
}, 3000);

如上代碼所示，我們動態創建了一個div元素，并添加了一個loading樣式類。我們希望在三秒后將其移除，但是我們不能確定它的樣式什么時候會生效。為了解決這個問題，我們需要使用setTimeout來等待一定時間后再移除樣式類。這樣就能確保樣式生效后再執行后續操作。 除了使用setTimeout和setInterval來等待樣式生效之外，我們還可以使用JQuery中提供的.ready方法來等待DOM加載完全后再執行JavaScript代碼。下面是一個案例：

$(document).ready(function () {
// 在這里處理JavaScript代碼
});

如上代碼所示，我們使用.ready方法來確保DOM加載完全后再執行JavaScript代碼。這種方式非常簡單易用，可以確保我們的代碼在正確的時機執行。 總之，等待樣式在JavaScript中是非常重要的，不同的情況需要不同的方法來實現。在實際開發中，我們需要根據不同的場景選擇不同的方法來等待樣式，確保代碼的正確性和可維護性。