setInterval多组定时器函数封装传参

昨天的例子是针对只有单个函数运行的结果,但是实际中可能会有多组函数这样同时进行,那么这个时候就要对函数进行封装传参,来实现效果了。就还拿昨天的例子来说吧,昨天写的例子实现的效果是点击按钮,让div向前移动,那么今天就扩展一下,点击按钮让div向后移动,想要实现这个效果,就必须要传参了,来看代码:

css代码
<style>
#box{width:50px;height:50px;background:#ff6b0e;position: absolute;top:50px;left:50px;}
</style>

html代码
</head>
<body>
<input id="btn1" type="button" value="向前"/>
<input id="btn2" type="button" value="向后"/>
<div id="box"></div>
</body>

那么js实现是这样的:

<script>
    //兼容不同浏览器获取行间样式
    function getStyle ( obj, attr ) {
        return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
    }

    window.onload=function(){
        var aBtn1=document.getElementById("btn1");
        var aBtn2=document.getElementById("btn2");
        var oBox=document.getElementById("box");

        aBtn1.onclick=function(){
            fn(oBox,18,500)
        };
        aBtn2.onclick=function(){
            fn(oBox,-18,10)
        };
        //以上参数的区别是dir一个大于0,一个小于0,所以下面可以针对符号做判断
        //大于和小于这些符号是不能当参数被传的
        function fn(obj,dir,target){
            clearInterval(obj.timer);//这里先要清除一下定时器是为了防止一直点击按钮,div一直加速

            //开启定时器,假定让其等于500的时候,停止下来
            obj.timer=setInterval(function(){
                var speed=parseInt(getStyle(obj,"left")) + dir;

                if( speed > target && dir>0){//这里要做判断大于目标数并且dir为大于0的数
                    speed = target
                }
                if( speed < target && dir<0){//这里要做判断小于目标数并且dir为小于0的数
                    speed = target
                }
                obj.style.left= speed +"px";

                if( speed == target){
                    clearInterval(timer)
                }

            },50)

            }


    };
</script>

其实这个例子是很简单的,但是需要注意的细节是符号是不能向参数一样被传的,所以就要做判断,因为有大量相同的代码。那么就把共通的可以专门提出来卸载函数里,然后将可变化的值设定为参数来传递即可。这是比较通俗的说法,当然可能用语上会不太准确,但是能明白就行,也欢迎大神指出!

好了,今天就这样了!

转载于:https://www.cnblogs.com/web001/p/8082784.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值