关于js中对于函数节流的理解与小案例

最新推荐文章于 2023-02-25 16:38:41 发布

我是一只小竹杠

最新推荐文章于 2023-02-25 16:38:41 发布

阅读量245

点赞数

分类专栏： JavaScript那点事

本文链接：https://blog.csdn.net/baidu_21088845/article/details/99413929

版权

JavaScript那点事专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以下是本人对函数节流的粗略理解。

在js中，我们可能会遇到一些好恶心的情况需要用到一些高频触发的事件。例如，用鼠标滚轴滑动界面时要做一些效果，这时需要监听滚动事件。又或者遇到一些比皮皮虾还皮的孩子或者网购控一直对这个按钮猛点击。为了防止这类骚操作的诞生，我们就需要用到函数节流来处理了。

说到函数节流，典型的就是定时器了。话不多说，先上码！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

       .chart em{
           font-style: normal;
           color: red;
           font-weight: bold;
       }

       .add{
           width: 100px;
           height: 50px;
           background-color: green;
           border: 0;
           color: #fff;
           float: left;
           margin-top: 300px;
           margin-left: 300px;
       }

       .point{
           width: 16px;
           height: 16px;
           background-color: red;
           position: fixed;
           left: 0;
           top: 0;
           display: none;
           z-index: 9999;
           border-radius: 50%;
       }
   </style>

           var $chart = $('.chart');
           var $count = $('.chart em');
           var $btn = $('.add');
           var $point = $('.point');

var $w01 = $btn.outerWidth();
var $h01 = $btn.outerHeight();

var $w02 = $chart.outerWidth();
var $h02 = $chart.outerHeight();

$btn.click(function(){

var oPos01 = $btn.offset();
var oPos02 = $chart.offset();

$point.css({'left':oPos01.left+parseInt($w01/2)-8,'top':oPos01.top+parseInt($h01/2)-8});
$point.show();

               $point.animate({'left':oPos02.left+parseInt($w02/2)-8,'top':oPos02.top+parseInt($h02/2)-8},800,function(){
                   $point.hide();
                   var iNum = $count.html();
                   $count.html(parseInt(iNum)+1);
               });

});

});
</script>

</head>
<body>
   <div class="chart">购物车<em>0</em></div>
   <input type="button" name="" value="加入购物车" class="add">
   <div class="point"></div>
</body>
</html>

效果图如下：

上面是没有加上定时器的，结果在多次快速点击的时候，动画就会不显示。而且还执行了很多次。

解决方法是通过设置一个定时器来限制点击次数，代码如下：

PS: 啥都没改,就加了个定时器哈

.....

$btn.click(function(){

               // 通过设置一个定时器来限制点击次数，从而修复多次快速点击动画不显示的bug
               // 这也是实现函数节流的一个典型例子。关于函数节流后面会马上开讲。
               clearTimeout(timer);
               $point.hide();
               timer = setTimeout(function(){

var oPos01 = $btn.offset();
var oPos02 = $chart.offset();

$point.css({'left':oPos01.left+parseInt($w01/2)-8,'top':oPos01.top+parseInt($h01/2)-8});
$point.show();

                   $point.animate({'left':oPos02.left+parseInt($w02/2)-8,'top':oPos02.top+parseInt($h02/2)-8},800,function(){
                       $point.hide();
                       var iNum = $count.html();
                       $count.html(parseInt(iNum)+1);
                   });
               },200);

});

.....

好了，以上就是我的小结~大牛不要打我，我怕疼

我是一只小竹杠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于js中对于函数节流的理解与小案例

以下是本人对函数节流的粗略理解。在js中，我们可能会遇到一些好恶心的情况需要用到一些高频触发的事件。例如，用鼠标滚轴滑动界面时要做一些效果，这时需要监听滚动事件。又或者遇到一些比皮皮虾还皮的孩子或者网购控一直对这个按钮猛点击。为了防止这类骚操作的诞生，我们就需要用到函数节流来处理了。说到函数节流，典型的就是定时...
复制链接

扫一扫

专栏目录