获取鼠标移动坐标之防抖与节流

最新推荐文章于 2024-05-11 10:05:08 发布

元元元缘

最新推荐文章于 2024-05-11 10:05:08 发布

阅读量550

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_64547652/article/details/126617255

版权

<script>
    // 实时获取鼠标坐标
    // document.onmousemove = function (e) {
    // let a = 'X的坐标：' + e.pageX + '---Y的坐标：' + e.pageY
    // console.log(a);
    // }

    //防抖（获取最后一次鼠标的坐标）
    let fangdou = null
    //节流（每隔一段时间获取一次鼠标坐标）
    let jieliu = null

    window.onmousemove = function (e) {
    //防抖
        clearTimeout(fangdou)//鼠标移动时就会重新计算
        fangdou = setTimeout(function () {
            console.log('防抖：X的坐标：' + e.pageX + '---Y的坐标：' + e.pageY)
        }, 500)//鼠标停止时500ms后执行

    //节流
        if (jieliu) {
            return
        } else {
            jieliu = setTimeout(function () {
                console.log('节流：X的坐标：' + e.pageX + '---Y的坐标：' + e.pageY);
                jieliu = null
            }, 1000)
        }
    }
</script>