절류와 떨림 방지

8453 단어
절류와 떨림 방지
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>

좋은 웹페이지 즐겨찾기