防抖和节流

最新推荐文章于 2024-10-01 20:12:28 发布

King、344

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量50

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_56562996/article/details/119788823

版权

当事件触发之后，约定单位时间（比如1s）之后，执行里面的代码；如果在
单位时间只内再次触发了事件，那么要重新计时，以保证事件里面的代码只执行一次。
<body>
    <button>按钮</button>
    <script>
        let timer = null
        document.querySelector('button').addEventListener('click', function () {
            clearTimeout(timer)
            timer = setTimeout(function () {
                console.log(1);
                console.log(2);
                console.log(3);
                console.log(4);
            }, 1000)
        })
    </script>
</body>

 let timer = null
        // 给文档添加 鼠标移动事件
        $(document).on('mousemove', function (e) {
            // 判断如果timer不等于空 就不执行代码 等于空执行下面代码
            if (timer !== null) return
            // 获取鼠标移动的 x轴和y轴
            let x = e.pageX
            let y = e.pageY
            console.log(x, y);
            // 开启定时器100毫秒执行
            timer = setTimeout(() => {
                $('img').css({
                    left: x + 'px',
                    top: y + 'px'
                })
                timer = null
            }, 100)
        })