JS中的定时器封装函数

最新推荐文章于 2023-04-30 13:59:02 发布
最新推荐文章于 2023-04-30 13:59:02 发布
阅读量1k 收藏
点赞数 1
文章标签： 封装 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/darabiuz/article/details/115531511
版权

定时器是js当中非常常用的一个windows对象的方法，把他封装后加入自己的js库里面会带来很多便捷

function move(obj, attr, target, speed, callback) {
   
	//关闭上一个定时器
	clearInterval(obj.timer);

	//获取元素目前的位置
	var current = parseInt
最低0.47元/天 解锁文章
望屿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript的定时器与运动函数封装
weixin_58139900的博客
11-04 312
定时器 定时器分类 延迟定时器：多长时间之后才执行一次 （只执行一次 ） 应用场景：广告弹出 间歇性定时器：没隔多长时间就执行一次（只要不清除就一直执行） 应用场景：轮播图，倒计时 延迟定时器：一般支持最小值4ms 间歇性定时器：一般支持最小毫秒值 10ms 定时器的设置 延迟定时器 基本语法：setTimeout(fun,time) fun:函数，可以传递实名函数或匿名函数 time：时间，单位是ms（单...
JS学习day06--定时器与函数封装
weixin_43707498的博客
12-07 197
1、定时器 格式 延迟定时器：隔多长时间以后执行，只执行一次 var 定时器标识 = setTimeout(函数, 时间); clearTimeout(标识); 间歇定时器：每隔一段时间执行，重复执行 var 定时器标识 = setInterval(函数, 时间); clearInterval(标识); 时间为毫秒，定时器会返回一个标识，方便我们清除这个定时器 应用： ​ 1、广告 ​ 2、发送验证码（防止多次点击，可以用disabled 、 先关后开 、 自定义开关） 定时器中的
js常用功能封装成方法（持续更新）
qq_45442879的博客
12-08 164
js常用功能封装成方法
js 封装一个定时器
weixin_43483746的博客
04-13 377
timer函数接收三个参数:定时器名称、要执行的函数和时间间隔
js 定时器不卡顿不消耗资源 setTimeOut的简单封装 定时更新数据
斜杠的博客
11-21 8740
因为setTimeInterVal,定时执行，无论是否执行完，在下一个时间点都会继续执行，运行时间长的话会有卡顿等现象。 基于此，改用setTimeOut,setTimeOut只在执行完才执行下一个时间点。在下一个时间点可以清除上个定时器。如此循环不卡顿，亲测可用。 运行了几个小时，一两分钟甚至几秒执行一次，同时执行了几十个这样的写法，完全不消耗资源不卡顿。特此分享。
JavaScript定时器
热门推荐
weixin_52629158的博客
04-30 1万+
setInterval() ：是属于 window 的方法，按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。其中 回调函数 "clock()" 可以写在 双引号中，也可以写在单引号中。setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。clearInterval() 方法 的参数 必须是由 setInterval() 返回的 ID 值。(这个内容 描红显示)
js定时器+简单的动画效果实例
10-19
为了使代码更易于复用，我们将这部分逻辑封装在一个名为`slideDown`的函数中，该函数接受元素和最大高度作为参数。 ```javascript function slideDown(elem, maxHeight) { elem.style.display = 'block'; elem....
谈谈JavaScript中的函数
10-14
JavaScript中的函数是编程的核心组成部分，它们允许我们将代码组织成可重用的模块，便于管理和执行特定任务。在JavaScript中，函数既是一种数据类型，也可以作为其他函数的参数或返回值，这种特性使得JavaScript具备...
谈谈JavaScript中的函数与闭包
10-27
JavaScript中的函数和闭包是其核心特性之一，它们在编程中扮演着至关重要的角色。首先，我们要理解函数在JavaScript中的地位。JavaScript是一种基于原型的动态类型语言，它允许函数成为一等公民，也就是说，函数可以...
JavaScript变速动画函数封装添加任意多个属性
10-17
JavaScript变速动画函数封装的核心在于平滑地改变一个或多个CSS属性值，以达到动画效果。在给定的示例中，我们看到一个简单的JavaScript函数`animate`被用来实现这一功能。这个函数接受两个参数，一个是需要操作的...
js 各种定时器实现
07-06
已知的多种方式实现的js定时器功能。支持延缓加载功能。
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
10-15
在实际应用中，这些封装函数可以大大简化JavaScript动画的编写。例如，你可以用它们来创建平滑的页面滚动、元素淡入淡出效果，或是复杂的游戏动画。为了适应不同的场景，你还可以添加更多的参数，比如缓动函数（ease...
JS定时器详解
IO14122的博客
10-27 2369
JS定时器使用详解，介绍不同定时器的使用场景
javascript 定时任务封装
aiqianqi1796的博客
03-15 261
/** * 定时任务 * 间隔时间,执行次数,要带的参数,要执行的函数. */ var TimingTask = function(time,count,param,fun){ this.id = -1; //编号 this.exectionCount = 0; //执行了多少次 if(typeof...
JavaScript---day07
Amanecer_的博客
08-30 236
函数返回值、获取非行间样式、函数封装与代码复用、定时器
[前端]lay-ui按钮定时器（强制阅读）
qq_40514744的博客
10-12 1279
lay-ui按钮定时器[强制阅读]div部分JavaScript部分 使用时先引入layui 废话少说，直接看疗效 div部分 <div class="layer-foot text-c" id="divBtn"> <button id="i-know-btn" class="layui-btn layui-btn-disabled" onclick="layer.closeAll();">确认阅读</button> <span id="countNum" &
JS实现计时器
HowToRemember的博客
06-22 422
网上计时器一大把,闲来无事开记事本自己也码了个.一来页面干净适合魔方竞技计时????,二来随便温故下存JS语法????. 特点 计时器原则按下空格后需松手(keyUp)开始计时,按下空格触(keyDown)到立即停止计时. 销毁本次记录撤回上次最近. 彩蛋本次成绩不计入按钮????. 几个JS小技术点 代码技术点简单,逻辑写的有点复杂没有过多优化,适合初学者研习改造. localStorage:浏览器本地缓存用于存历史最佳记录,下次打开仍有效.清除缓存后清空. sessionSt
js 封装倒计时
吴冬雪的博客
10-13 297
【代码】js 封装倒计时。
js之计时器（双向绑定，返回：天，时，分，秒）
我就叫贝塔
05-05 351
需求：投票系统，点击开始，开始正向计时
js封装定时器多个组件使用
最新发布
01-10
在JavaScript中，可以通过封装定时器来实现多个组件的定时功能。以下是一个简单的例子： ```javascript // 定义一个封装了定时器的组件 function TimerComponent(interval, callback) { this.interval = interval; // 定时器间隔时间 this.callback = callback; // 定时器回调函数 this.timerId = null; // 定时器Id } // 启动定时器 TimerComponent.prototype.start = function() { // 判断定时器Id是否已存在，如果存在则表示已启动过，不再重复启动 if (this.timerId) { return; } // 使用箭头函数确保回调函数内部使用正确的this对象 this.timerId = setInterval(() => { // 调用回调函数 this.callback(); }, this.interval); } // 停止定时器 TimerComponent.prototype.stop = function() { // 清除定时器Id clearInterval(this.timerId); this.timerId = null; } // 创建多个定时器组件实例 var timer1 = new TimerComponent(1000, function() { console.log("定时器1触发"); }); var timer2 = new TimerComponent(2000, function() { console.log("定时器2触发"); }); // 启动定时器 timer1.start(); timer2.start(); // 停止定时器 // timer1.stop(); // timer2.stop(); ``` 以上代码中，我们定义了一个`TimerComponent`对象，该对象包含了一个定时器的间隔时间和回调函数，并且提供了启动和停止定时器的方法。通过创建多个`TimerComponent`实例，每个实例都可以设置不同的定时器间隔和回调函数。调用`start`方法可以启动定时器，调用`stop`方法可以停止定时器。这样，我们就可以通过封装定时器来实现多个组件的定时功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值