简单说说节流与防抖

最新推荐文章于 2023-04-15 17:34:28 发布
ZXH0122
最新推荐文章于 2023-04-15 17:34:28 发布
阅读量274
点赞数
分类专栏：前端文章标签： jquery
本文链接：https://blog.csdn.net/ZXH0122/article/details/104757609
版权
前端专栏收录该内容
84 篇文章 3 订阅
订阅专栏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <title></title>
    <style>
        .sec{
            display: flex;
            justify-content: center;    /* 水平居中 */
            align-items: center;       /* 垂直居中 */
            height: calc(100vh / 3);    /* vh     相对于视口的高度。视口被均分为100单位的vh */
            font-size: 100px;
            box-shadow: 50px 50px 100px rgba(200,0,0, .5) inset,
                        -50px -50px 100px rgba(0,200,0, .5) inset,
                        -50px 50px 100px rgba(0,0,200, .5) inset,
                        50px -50px 100px rgba(150,150,0, .5) inset;  /* x轴偏移量  y轴偏移量  模糊范围  模糊半径 颜色 阴影位置*/
            text-shadow: 3px 3px 3px #D4F2E7,
                         3px 3px 5px #2E8B57; /* x轴偏移量  y轴偏移量  模糊范围 颜色*/
            background-image: radial-gradient(circle,#FFC0CB,#FF00FF,#9400D3); /* 形状circle圆形    ellipse椭圆  半径 颜色  范围 */
            filter: blur(1px);  /* 滤镜 */
        }
        
        .sec span{
            transform: scale(0);
            -webkit-box-reflect: below -60px -webkit-linear-gradient(
                top,
                transparent 50%,
                 rgba(0,0,0, 0.5));
        }

        .zoomIn{
            animation: scale .4s cubic-bezier(.5, .1, .1, .5) both;
            /* 动画名字 时间 规定的速度曲线 规定在动画开始之前的延迟 规定动画应该播放的次数  是否应该轮流反向播放动画*/
        }
        .rotate{
            animation: rotate 1s linear infinite;
        }
        .alert{
            margin: 0;
        }
        @keyframes scale {
            0%{
                transform: scale(0);
            }
            100%{
                transform: scale(1);
            }
        }
        @keyframes rotate {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="sec"><span class="zoomIn">1</span></div>
    <div class="sec"><span class="zoomIn">2</span></div>
    <div class="sec"><span class="zoomIn">3</span></div>
    <div class="sec"><span class="zoomIn">4</span></div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <script>
        //  $(window).scroll()                当滚动条滚动时触发
        //  $(document).height                当前页面的总高度
        //  $(window).height();               窗口的高度
        //  scrollTop()                       滚动条距离顶部的高度
        //  debounce（防抖）和throttle（节流） 用来减少调用频率，同时又不影响实际效果。 

        //  debounce 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时
        //   持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

        //  throttle 当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，
        //   秉着勤俭节约的优良传统美德， 我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴
        //   持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。






        // 做一个往上啦  加载完以后出现新的内容

        var count = 4;


        function onReachBottom(callback){
            var docHeight = $(document).height();    //页面的总高度
            var winHeight = $(window).height();      //窗口的高度
            var scrollTOP = $(window).scrollTop();   //滚动条滚动的距离
            // 阈值   最好最小不要小于1
            if(docHeight - winHeight - scrollTOP < 50){
                console.log('到底部了');
                callback();
            }
        }                                       //判断滚动到底  滚动执行这个



        var noData = true;

        function loadMore(){
            if (count >= 10) {
                if (noData) {
                    noData = false;
                    appdendAlert();
                    addClassSpan();
                }

                return false;
            }

            appdendAlert();
            throttle(appdendSection);
            addClassSpan();
        }                                        //滚动到底执行这个方法




        function appdendAlert(){
            if (!$('#alert').length) {
                var msg = noData 
                ?'<i class="glyphicon glyphicon-refresh rotate"></i>'
                :'没有更多数据了！！'

                var alertClass = noData ? 'info' : 'danger'
                var alert = 
                '<div class="alert alert-'+ 
                alertClass +
                ' text-center" id="alert">' +
                msg +
                '<button class="close" data-dismiss="alert" >&times;</button></div>';

            $('body').append(alert);
            }                                    //  如果他的长度为0  说明不存在可以给里插入警告框
        }                                       //插入一个警告框   加载数据时执行




        function appdendSection(){
            $('#alert').remove();
            var sec = '<div class="sec"><span>'+ ++count +'</span></div>'
            $('body').append(sec);
        }                                       //插入一个section  加载数据时执行
        function addClassSpan(){
            var $lastSpan = $('.sec:last').find('span');   //选中了最后一个div   再找里面的span
            if (!$lastSpan.hasClass('zoomIn')) $lastSpan.addClass('zoomIn');

        }
            


        
        var timer;
        // 防抖   清除计时器
        function debounce(callback){
            clearTimeout(timer);
            timer = setTimeout(function(){
                callback()
            },1000);        


        }
        // 节流    ☆☆☆☆☆☆☆☆☆☆☆☆☆☆推荐
        function throttle(callback){
            if (!timer) {
                timer = setTimeout(function(){
                    callback();
                    timer = false;
                },1000);
            }
        }
        // 以上是吧我们每一个要做的事情都放在不同的方法里面  出现问题容易调试
        $(window).on('scroll',function(){
            onReachBottom(loadMore);   //执行这个方法的时候吧loadMore传进去
        })


    </script>




</body>
</html>