关于防抖与节流的应用方案

防抖：一段时间完成一个操作；节流：定时完成操作。

应用场景：

防抖：
1、seach搜索联想，用户在不断输入输入值时，用防抖来节约请求资源。
2、windows触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发这一次。
3、防止重复提交。
节流：
1、鼠标不断点击触发，mousedown(单位时间内只触发一次)。
2、监听滚动事件，比如是否滑到底部自动加载更多，用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>防抖与节流</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);//节流
// *****************************************************************
//防抖
    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);
            }
        }
    }
// 节流
    function time(fn,wait){
        var pp=0;//参照物
        return function () {
            var now= + new Date();//1970 1 1 到现在的毫秒数
            if(now-pp>wait){
                fn.apply(this);
                pp=now
            }
        }
    }
    </script>
    </html>

关于防抖与节流的应用方案

应用场景：

猜你喜欢