master

分支 (1)

管理

管理

master

handwritten-code-series
/
18_debounce.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>debounce（防抖）</title>

    <style>
        #container{
            width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <!-- 防抖的原理就是：
        你尽管触发事件，但是我一定在事件触发 n 秒后才执行，
        如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行。
        总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行 -->

    <script type="module">
        import debounce from './js/18_debounce/debounce1.js'
        var count = 1;
        var container = document.getElementById('container');

        function getUserAction(e) {
            container.innerHTML = count++;
            console.log(e)
        };
        // container.onmousemove = getUserAction;
        container.onmousemove = debounce(getUserAction, 1000, true);
    </script>
</body>

</html>