防抖与节流(实现搜索时的优化方法【防抖】与复杂大数据量查询时请求控制次数【节流】)

<input type="text" oninput="debonce(cont, 1000)">
<div id="content"></div>
 
<script>
        var arr = document.getElementById('content')
        var num = 1;
        function cont(){
            arr.innerHTML = num++
        }
        arr.onmousemove = cont;

 

        // 防抖的方式
        // 实现过一秒之后再查询(延迟执行)
        function debonce(func, wait){
            let timeout;
            return function(){
                if(timeout) clearTimeout(timeout);  // 如果timeout存在值,则清除timeout
                timeout = setTimeout(() => {
                    func.apply()                // 如果timeout存在值时,1秒之后才能执行函数
                }, wait);
            }
        }
        // arr.onmousemove = debonce(cont, 1000);



        // 实现立即执行查询,1秒之后才能再次执行查询
        function debug(func, time){
            let timeout;
            return function(){
                if(timeout) clearTimeout(timeout)   // 如果timeout存在值,则清除timeout
                let call = !timeout;                // 有值为真,取反
                if(call) func.apply();          // 如果无值,则执行函数cont
                timeout = setTimeout(() => {        
                    timeout = null                  // 当值存在时,添加定时器time秒之后将timeout的值赋为空,反之一直不执行函数
                }, time);
            }
        }
        
        // arr.onmousemove = debug(cont, 1000);



        // 利用节流来实现 throttle
        // 用定时器的方式一般不建议  这么写  例如移动端做动画效果时 
        function throttle(func, time){
            let timeout;
            return function(){
                if(!timeout){
                    timeout = setTimeout(() => {
                        timeout = null
                        func.apply()
                    }, time);
                }
            }
        }

 

        // arr.onmousemove = throttle(cont, 1000);

 

        // 这时我们就可以利用时间戳的方式来实现  这样有利于浏览器的优化
        function throttlee(func, time){
            let num = 0;                // 上次的记录时间
            return function(){
                let arr = Date.now()    // 当前时间
                if(arr - num > time){   // 如果当前时间减去上次记录时间 大于 等待时间
                    func.apply();       // 则执行函数
                    num = arr;          // 重置上次的记录时间等于当前时间
                    console.log(num)
                }
            }
        }
        arr.onmousemove = throttlee(cont, 2000);



    </script>
posted @   网名想好了  阅读(467)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示