js函数节流

最新推荐文章于 2024-04-03 13:08:44 发布

Aaron Con

最新推荐文章于 2024-04-03 13:08:44 发布

阅读量470

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_47979372/article/details/121778562

版权

js函数节流

通常我们为使页面能展示更好的效果，我们会用js绑定一些事件实现更好的效果，但是如一些事件不需要时刻反馈出来，我们可以通过函数节流进行控制
使用延时器：在一定时间内只执行一次

setTimeout(fn,time)

1.基于时间的节流

<body>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>4</h1>
    <h1>5</h1>
    <h1>6</h1>
    <h1>7</h1>
    <h1>8</h1>
    <h1>9</h1>
    <h1>10</h1>
    <h1>11</h1>
    <h1>12</h1>
    <h1>13</h1>
    <h1>14</h1>
    <h1>15</h1>
    <h1>16</h1>
    <h1>17</h1>
    <h1>18</h1>
    <h1>19</h1>
    <h1>20</h1>
    <h1>21</h1>
    <h1>22</h1>
    <h1>23</h1>
    <h1>24</h1>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        var i = 0;
        function demo(){
            console.log(++i);
        }
        //节流函数
        function throttle(fn){
            if(fn._lock){
                return;
            }
            fn();
            fn._lock = true;
            //连续触发事件时，1s内执行一次事件
            setTimeout(function(){
                fn._lock = false;
                // fn();
            },1000)
        }
        window.onscroll = function(){
            throttle(demo);
        }
    </script>
</body>

2.基于操作的节流（防抖）

<body>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>4</h1>
    <h1>5</h1>
    <h1>6</h1>
    <h1>7</h1>
    <h1>8</h1>
    <h1>9</h1>
    <h1>10</h1>
    <h1>11</h1>
    <h1>12</h1>
    <h1>13</h1>
    <h1>14</h1>
    <h1>15</h1>
    <h1>16</h1>
    <h1>17</h1>
    <h1>18</h1>
    <h1>19</h1>
    <h1>20</h1>
    <h1>21</h1>
    <h1>22</h1>
    <h1>23</h1>
    <h1>24</h1>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        var i = 0;
        function demo(){
            console.log(++i);
        }
        window.onscroll = function(){
            throlle(demo);
        }
        function throlle(fn){
        	//清除延时器
            clearTimeout(fn._timebar);
			//触发只执行最后一次
            fn._timebar = setTimeout(fn,20);
        }        
    </script>
</body>

Aaron Con

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js函数节流

js函数节流通常我们为使页面能展示更好的效果，我们会用js绑定一些事件实现更好的效果，但是如一些事件不需要时刻反馈出来，我们可以通过函数节流进行控制使用延时器：在一定时间内只执行一次setTimeout(fn,time)1.基于时间的节流<body> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>4</h1> <
复制链接

扫一扫