节流防抖

节流防抖

<!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>
</head>
<body>
    <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
    <div class="box"></div>
    <script>
        let num = 1;
        let content = document.getElementById('content');
        function count() {
            requestAnimFrame(()=>{
                content.innerHTML = num++;
            })
        };
        window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                function( callback ){
                    window.setTimeout(callback, 1000 / 60);
                };
        })();

        content.onmousemove = throttle(count,300);
        //节流函数
        function throttle(func, wait) {
            let timeout;
            return function() {
                let context = this;
                let args = arguments;
                if (!timeout) {
                    timeout = setTimeout(() => {
                        timeout = null;
                        func.apply(context, args)
                    }, wait)
                }

            }
        }
    </script>
</body>
</html>

 

posted @ 2019-09-05 18:45  小猪冒泡  阅读(121)  评论(0)  编辑  收藏  举报