關(guān)于防抖與節(jié)流的應用方案


防抖：一段時間完成一個操作；節(jié)流：定時完成操作。
應用場景：

防抖：
1、seach搜索聯(lián)想，用戶在不斷輸入輸入值時，用防抖來節(jié)約請求資源。
2、windows觸發(fā)resize的時候，不斷的調(diào)整瀏覽器窗口大小會不斷的觸發(fā)這個事件，用防抖來讓其只觸發(fā)這一次。
3、防止重復提交。
節(jié)流：
1、鼠標不斷點擊觸發(fā)，mousedown(單位時間內(nèi)只觸發(fā)一次)。
2、監(jiān)聽滾動事件，比如是否滑到底部自動加載更多，用throttle。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>防抖與節(jié)流</title>
        <style>
            .container{width: 400px;height: 200px;background: #ccc;text-align: center;font-size: 25px;line-height: 200px;}
        </style>
    </head>
    <body>
        <div class="container"></div>
    </body>
    <script>
    var count=1;
    var container=document.querySelector(".container");
    function getUser() {
        this.innerHTML= count++;
    }
    // container.onmousemove=demo(getUser,1000,true);//防抖
    container.onmousemove = time(getUser, 1000);//節(jié)流
// *****************************************************************
//防抖
    function demo(fn,wait,buber) {
        var timer;
        return function () {
            clearTimeout(timer);
            if(buber){
                var callNow=!timer;
                timer=window.setTimeout(function () {
                    timer=null
                },wait);
                if(callNow){
                    fn.apply(this);
                }
            }
            else{
                clearTimeout(timer);
                timer = window.setTimeout(fn.bind(this), wait);
            }
        }
    }
// 節(jié)流
    function time(fn,wait){
        var pp=0;//參照物
        return function () {
            var now= + new Date();//1970 1 1 到現(xiàn)在的毫秒數(shù)
            if(now-pp>wait){
                fn.apply(this);
                pp=now
            }
        }
    }
    </script>
    </html>

作者：Vam的金豆之路

主要領域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路