SOURCE

console 命令行工具 X clear

                    
>
console
// debounce-非立即执行版本
function debounce1(func, wait) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        if(timer) {
           clearTimeout(timer);
        }
        timer = setTimeout(() => {
            func.apply(context, args);
        }, wait);
    }
}

// debounce-立即执行版本
function debounce2(func, wait) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        let callNow = !timer;
        timer = setTimeout(()=>{
            timer = null;
        }, wait);
        if (callNow) {
            func.apply(context, args);
        }
    }
}

// debounce Test
function debounceNormal() {
    return debounce1(function(info) {
        console.log("非立即执行debounce");
    }, 1000);
}

function debounceImmediate() {
    return debounce2(function() {
        console.log("立即执行debounce");
    }, 1000)
}

// throttle-timeout
function throttle1() {

}
// throttel-timestamp
function throttle2() {
     
}
<button class="btn" onclick="debounceNormal()">debounce非立即执行</div>
<button class="btn" onclick="debounceImmediate()">debounce立即执行</div>
<button class="btn" onclick="throttleDemo1()">throttle 定时器</div>
<button class="btn" onclick="throttleDemo2()">throttle 时间戳</div>
.btn {
    display: block;
    margin-top: 10px;
    width: 200px;
    height: 44px;
    background: yellowgreen;
    outline: none;
    border: none;
    border-radius: 6px;
    color: aliceblue;
    line-height: 44px;
    text-align: center;
}