javascript函数节流（简易）

最新推荐文章于 2024-04-18 23:25:37 发布

桃花朵朵开3

最新推荐文章于 2024-04-18 23:25:37 发布

阅读量298

点赞数 1

分类专栏：小白笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_48445738/article/details/108760949

版权

小白同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

笔记

36 篇文章 0 订阅

订阅专栏

我们在平时开发的时候，会有很多场景会频繁触发事件，比如说搜索框实时发请求，onmousemove, resize, onscroll等等，有些时候，我们并不能或者不想频繁触发事件，咋办呢？这时候就应该用到函数防抖和函数节流了！

函数节流

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
    <style>
        #huaban {
            width: 200px;
            height: 200px;
            background-color: black;
            margin: auto;
        }
    </style>
</head>

<body>
    <div id="huaban"></div>
    <script>
        var div = document.getElementById('huaban')

        function a() {
            console.log('方法执行')
        }
        div.onmousemove = throttle(a, 2000)

    </script>
</body>

</html>

原始代码如上现在我们需要2秒钟触发一次时间我们用时间戳来实现

我们需要定义一个处理函数throttle（）

节流函数是防止用户一下发送很多请求所以我们需要限制时间隔一段时间才能触发一次时间

//节流函数
 function throttle(fn, time) {
            var last = 0;  //定义上一次的时间
            return function() {
                var nowtime = new Date()  //得到现在的时间
                if (nowtime.getTime() - last >= time) {  //当现在的时间-上一次的时间 >= 我们设定的时间时就触发一次事件
                    console.log(nowtime.getTime() - last + "秒")
                    fn()
                    last = nowtime.getTime()
                }
            }
        }

在这里插入图片描述
这样我们的简易节流函数就做好了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
    <style>
        #huaban {
            width: 200px;
            height: 200px;
            background-color: black;
            margin: auto;
        }
    </style>
</head>

<body>
    <div id="huaban"></div>
    <script>
        var div = document.getElementById('huaban')

        function a() {
            console.log('方法执行')
        }
        function throttle(fn, time) {
            var last = 0; //定义上一次的时间
            return function() {
                var nowtime = new Date() //得到现在的时间
                if (nowtime.getTime() - last >= time) {  //当现在的时间-上一次的时间 >= 我们设定的时间时就触发一次事件
                    console.log(nowtime.getTime() - last + "秒")
                    fn()
                    last = nowtime.getTime()
                }
            }
        }
         div.onmousemove = throttle(a, 2000)
    </script>
</body>

</html>