节流阀(结合案例轮播图)

m0_63400611

已于 2022-05-18 16:07:38 修改

阅读量220

点赞数

分类专栏： js 文章标签：动画 css3 前端

于 2022-03-01 15:43:45 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/123206707

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

防止轮播图按钮连续点击造成播放过快

节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个动画,让事件无法连续触发

核心实现思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数

开始设置一个变量var flag = true;

if(flag = false; do something) 关闭水龙头

利用回调函数动画执行完毕,flag = true 打开水龙头

代码

为网页轮播图优化后的代码

HTML

<!DOCTYPE html>
<html lang="ZH-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*清除浮动*/
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {       
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }

        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .box {
            position: relative;
            margin: 50px auto;
            width: 600px;
            height: 300px;
            background-color: pink;
        }
        .point {
            position: absolute;
            padding: 0;
            margin: 0;
            transform: translate(-50%);
            left: 50%;
            bottom: 20px;
            height: 12px;
            padding: 0px 5px;
            background-color: white;
            opacity: .8;
            line-height: 8px;
            text-align: center;
            border-radius: 8px;
        }
        .point li {
            display: inline-block;
            width: 7px;
            height: 7px;
            color: rgba(255,255,255,0.00);
			border: 2px solid;
            border-radius: 5px;
			border-color: black;
            cursor: pointer;
			margin: 0px 2px;
        }
		.current {
			background-color: orange;
		}
        .pic ul {
            position: absolute;
            padding: 0;
            margin: 0;
            width: 800%;
            left: 0;
            top: 0;
        }
        .pic ul li {
            float: left;
        }
        .pic ul li a img {
            width: 600px;
            height: 300px;
        }
        .button {
            position: absolute;
            display: none;
            top: 50%;
            width: 100%;
            transform: translate(0, -50%);
            height: 32px;
            /* background-color: blue; */
        }
        .arrow-prev {
            float: left;
        }
        .arrow-next {
            float: right;
        }
        .arrow-prev,
        .arrow-next {
            width: 22px;
            height: 32px;
            background-color: black;
            opacity: .5;
            line-height: 32px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic clearfix">
            <ul>
                <li>
                    <a href="javascript:;">
                        <img src="../upload/focus.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../upload/focus1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../upload/focus2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../upload/focus3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../upload/focus.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="button">
            <a href="javascript:;" class="arrow-prev"><</a>
            <a href="javascript:;" class="arrow-next">></a>
        </div>
            <ul class="point clearfix">
             </ul>
    </div>
	<script src="../js/animate.js"></script>
    <script src="./index.js"></script>
</body>
</html>

animate.js

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft == target){
            clearInterval(obj.timer);
//            if(callback) {
//                callback();
//            }
			//与if作用一致
			callback && callback();
        }
        obj.style.left = obj.offsetLeft + step +'px';
    }, 15);
}

index.js

window.addEventListener('load', function() {
    var box = document.querySelector('.box');
    var btn = document.querySelector('.button');

    //鼠标经过图片显示按钮 不经过则隐藏
    box.addEventListener('mouseover', function () {
        btn.style.display = 'block';
        clearInterval(timer);
        timer = null;//清除定时器变量
    })
    box.addEventListener('mouseout', function (){
        btn.style.display = 'none';
        timer = setInterval(function() {
            //调用点击事件
            next.click();
        }, 2000)
    })

    //动态的生成控制图片的圆圈 有几张图片生成几个圆圈
    var pic = document.querySelector('.pic');
    var picul = pic.querySelector('ul');
	var point = document.querySelector('.point');
    //  console.log(picul.children.length);
    for(var i=0; i<picul.children.length-1; i++) {
        //创建一个li
        var li = document.createElement('li');
        li.setAttribute('index', i);
        //将li插入到ul中
        point.appendChild(li);
		li.addEventListener('click', function() {
			for(var i=0; i<point.children.length; i++) {
				point.children[i].classList.remove('current');
			}
			this.classList.add('current');
            //获取当前点击的圆点的索引号index
            var index = this.getAttribute('index');
            var picwidth = pic.offsetWidth;
            animate(picul, -index * picwidth);
            //在点击了圆圈之后将索引号赋值给num和circle
            num = index;
            circle = index;
		})
        point.children[0].classList.add('current');
    }
	//点击右侧按钮移动图片
    var num = 0;
    var circle = 0;
	//设置flag节流阀
	var flag = true;
    var picwidth = pic.offsetWidth;
    var next = document.querySelector('.arrow-next');
    next.addEventListener('click', function() {
        if(flag) {
			flag = false; //关闭节流阀
			if(num == point.children.length) {
            picul.style.left = 0;
            num = 0;
        }
        num++;
        animate(picul, -num * picwidth, function() {
			flag = true; //打开节流阀
		});
        //使用声明的circle变量控制圆圈一起变化
        circle++;
        if(circle == point.children.length) {
            circle = 0;
        }
        //清除其他小圆圈的current类名 留下当前圆圈的current类名
        for(var i = 0; i<point.children.length; i++) {
            point.children[i].className = '';
        }
        point.children[circle].className = 'current';
		}
    })

    //点击左侧按钮移动图片
    var prev = document.querySelector('.arrow-prev');
    prev.addEventListener('click', function() {
        if(flag) {
			flag = false; //关闭节流阀
			if(num == 0) {
            picul.style.left = (picul.children.length - 1) * picwidth;
            num = point.children.length;
        }
        num--;
        animate(picul, -num * picwidth, function() {
			flag = true; //打开节流阀
		});
        //使用声明的circle变量控制圆圈一起变化
        
        if(circle == 0) {
            circle = point.children.length;
        }
        circle--;
        //清除其他小圆圈的current类名 留下当前圆圈的current类名
        for(var i = 0; i<point.children.length; i++) {
            point.children[i].className = '';
        }
        point.children[circle].className = 'current';
		}
    })

    //自动定时切换下一张图片
    var timer = setInterval(function() {
        //调用点击事件
        next.click();
    }, 2000)
})

修改部分

animate.js中判断是否有回调函数且调用函数的方式做了优化

1.修改前
if(callback) {
    callback();
}
//与if作用一致

2.修改后
callback && callback();

index.js中左右按钮添加了节流阀

var flag = true;
btn.addEventListener('click', function() {
    if(flag) {
        flag = false;//关闭节流阀
    
        //animate()方法的回调函数打开节流阀
        animate(obj, target, function() {
            flag = true;//打开节流阀
        )}
    }
}

m0_63400611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
节流阀(结合案例轮播图)

防止轮播图按钮连续点击造成播放过快节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个动画,让事件无法连续触发核心实现思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数开始设置一个变量var flag = true;if(flag = false; do something) 关闭水龙头利用回调函数动画执行完毕,flag = true 打开水龙头代码为网页轮播图优化后的代码HTML<!DOCTYPE html><html lang="Z
复制链接

扫一扫