關於狀態管理的應用，在原生 JS 中最有趣的、也必要的，應該就是 isEventRunning 的 true/false 了。
我們可以在初始創建一個 let 變數，
用來避免在執行某個事件偵測時，重複呼叫造成的麻煩，如卡頓、非預期行為等等。

let isLoading = false;

例如最經典的 IntersectionObserver API，我們可以搭配並設定若在特定 Enry 位置向下捲動，就會更新新的資料。

function setupObserver() {
    return new IntersectionObserver(handleIntersection, {});
}
function handleIntersection(entries) {
    entries.forEach((entry) => {
        if (entry.isIntersecting &&
            !isLoading 
        ) {
            observer.unobserve(entry.target);
            fetchData();
        }
    });
}

如果已經觸發到了 Entry 點，且沒有 isLoading (!isLoading 相當於 isLoading = false)
就會去 fetch 資料進而渲染到畫面上。

async function fetchData() {
    if (isLoading) return;
    isLoading = true;
    
    // 做 fetch 該做的事情
    
    // 渲染到畫面上
    
    isLoading =false
}catch(error){
    console.log("Error Fetching data:", error);
    
    isLoading = false
}

只有在 fetchData 的時候，暫時將 isLoading 設定為 true，直到整個 Promise 完成（結束或發生錯誤），只有在 fetch 的時候會轉為 true。
如果 isLoading = true (亦即在程式語言中，存在），就跳出函式。

簡單的一個布林變數，就能避免事件重複觸發。
同理，我們也可以在其他事件中這樣做：

async function arrowMotion(imageCount) {
    let isScrolling = false;
    
    imagesWrapper.addEventListener("scroll", function (e) {
    
    leftArrowButton.addEventListener("click", function () {
        if (isScrolling) return;
        isScrolling = true;
        
        // 移動到指定位置
        
        isScrolling = false;
    }
    rightArrowButton {...}
 }

在滾動事件中，加入 isScrolling 布林變數，只要還在捲動就不能觸發，就不會在捲動卷軸還沒到指定位置前、就重複觸發、抽搐或沒算到想要的移動數職啦！