前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript基础学习--11 定时器管理、函数封装

JavaScript基础学习--11 定时器管理、函数封装

作者头像
用户1148399
发布2018-01-09 15:30:00
9920
发布2018-01-09 15:30:00
举报
文章被收录于专栏:web前端web前端

Demos:   https://github.com/jiangheyan/JavaScriptBase

一、定时器管理

     1、var timer = null;  改为  oDiv.timer = null;(此时可以不写,因为oDiv存在时,undefined被clearInterval 兼容)

     2、正负值的处理:dir = parseFloat(getStyle(obj, attr)) < target ? dir : -dir;     //不让用户输正负值,直接用目标地和现在的地点大小判断,从而得出dir是正是负,再“加”给位移元素

     3、callback 回调函数的添加  

代码语言:javascript
复制
function doMove(obj, attr, dir, target, callback) {
    dir = parseFloat(getStyle(obj, attr)) < target ? dir : -dir;
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var speed = parseFloat(getStyle(obj, attr)) + dir;
        if (speed > target && dir > 0 || speed < target && dir < 0) {
            speed = target;
        }
        obj.style[attr] = speed + 'px';
        if (speed == target) {
            clearInterval(obj.timer);
            callback && callback(); //如果存在回调函数,则运行该函数
        }
    }, 30);
}
doMove(aDiv[i], 'top', 10, 500, function() {     //完成前面一系列函数操作(aDiv[i], 'top', 10, 500, )之后需要运行的函数(核实运行看回调函数写在什么地方处于什么条件)
    doMove(_this, 'top', 10, 0);
});     
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-08-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档