js防抖和节流的理解

最新推荐文章于 2024-02-01 09:35:36 发布

曾经的水哥

最新推荐文章于 2024-02-01 09:35:36 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/weixin_41749729/article/details/102819559

版权

<!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>Document</title>
</head>
<body>
    <div id="app" style="width:400px;height:400px;border:1px solid red;"></div>
    <script>
        // 鼠标在app元素里面移动 鼠标停止后一秒钟在执行函数 防抖: 事件在设定事件后执行一次，鼠标不停止不执行
        // 可以 鼠标一直移动 看效果
        let app = document.getElementById('app')
        let timer = null
        app.onmousemove = function () {
            if (timer) {
                clearTimeout(timer)  
            }
            timer = setTimeout(() => {
                console.log('防抖函数：鼠标停止移动后一秒钟执行，只执行一次，鼠标一直移动就不会执行') // 等待鼠标 停止移动1秒钟后在执行
                
            }, 1000)
        }

        // 节流： 事件 每隔多长事件 执行一次 窗口尺寸一直在改变不停止 隔一秒钟也会执行节流函数
        // 可以 一直改变窗口尺寸 看效果
        let canrun = true
        window.addEventListener('resize', () => {
            if (canrun == false) return
            canrun = false
            setTimeout(() => {
                canrun = true
                // 执行的代码块
                console.log('节流函数：窗口尺寸改变，每隔一秒钟执行一次节流函数，窗口一直在改变，也会执行')
            }, 1000)
        })
    </script>
</body>
</html>

曾经的水哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js防抖和节流的理解

<!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-U...
复制链接

扫一扫