函式節流(Throttling)

函式節流應用的實際場景，多數在監聽頁面元素滾動事件的時候會用到。因為滾動事件，是一個高頻觸發的事件。以下是監聽頁面元素滾動到底部的示例程式碼：

// 簡單的節流函式
function throttle(func, wait, mustRun) {
    var timeout,
        startTime = new Date();

    return function() {
        var context = this,
            args = arguments,
            curTime = new Date
 
();

        clearTimeout(timeout);
        // 如果達到了規定的觸發時間間隔，觸發 handler
        if (curTime - startTime >= mustRun) {
            func.apply(context, args);
            startTime = curTime;
            // 沒達到觸發間隔，重新設定定時器
        } else {
            timeout = setTimeout(func, wait);
        }
    };
};

// 實際想繫結在 scroll 事件上的 handler
 

function realFunc() {
    //判斷是否滾動到頁面最底部
    var scrollTop = Math.ceil($(this).scrollTop());　　
    var scrollHeight = $(document).height();　　
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight >= scrollHeight) {　
        $("script:first").before("<p>Lorem ip.</p>"
 
)
    }
}

// 採用了節流函式
$(window).scroll(throttle(realFunc, 500, 1000))