JS中的定时器
在JS中的定时器分两种:
1,setTimeout()
2,setInterval()
setTimeout():
只在指定时间后执行一次:
function hello(){
alert('hello');
}
// 使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
//一般第一个元素写入函数名
var t2 = window.setTimeout("hello()",3000) // 使用字符串执行方法
window.clearTimeout(t1); // 去掉定时器。
setInterval():
在指定时间为周期循环执行:
<script type="text/javascript">
window.onload = function(){
var oapp = document.getElementById('app');
var movebtn = document.getElementById('move');
var count = 0;
var timer = null;
movebtn.onclick = function(){
timer = setInterval(function(){
count += 3;
if(count>=500){
clearInterval();
}
oapp.style.marginLeft = count + 'px';},50);
}
}
</script>
</head>
<body>
<div id="app" style="width:100px;height: 100px;border:1px solid red"></div>
<button id ='move'>移动</button>
</body>
对于这两个方法,需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout。
JS中的定时器的更多相关文章
- js 中的定时器
在js中的定时器分两种:1.setTimeout() 2.setInterval() 1.setTimeOut() 只在指定时间后执行一次 /定时器 异步运行 function hello(){ al ...
- 解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
1.问题描述 在一些需求开发中.需要设定软件提供服务的时间段(营业时间).这时可以选择定时器来实现.可以选择让定时器每隔一段时间检测当前时间是否在服务时间.到达服务时间.进入服务状态.未到服务时间.进 ...
- 关于js中两种定时器的设置及清除
1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...
- 关于js中两种定时器的设置及清除(转载)
1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- JavaScript基础(3)-JS中的面向对象、定时器、BOM、位置信息
一.创建对象的几种常用方式. 1.使用Object或对象字面量创建对象: a.使用Object()内置的构造函数来创建对象,例如: var student = new Object(); // 创建一 ...
- 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- js中定时器调用函数时为什么会有引号
之前在学习的时候并没有发现的细节,关于js中,定时器的问题 这里我们写两个延时器 setTimeout(func, 0); setTimeout("func()", 0);定时器中 ...
- 关于js中this指向的理解总结!
关于js中this指向的理解! this是什么?定义:this是包含它的函数作为方法被调用时所属的对象. 首先,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁 ...
随机推荐
- Java并发编程之读写锁
读写锁维护了一对相关的锁,一个用于只读操作,一个用于写入操作.只要没有writer,读取锁可以由多个reader线程同时保持.写入锁是独占的. 可重入读写锁 ReentrantReadWriteLoc ...
- OPEN(SAP) UI5 学习入门系列之三:MVC (下) - 视图与控制器
继续来学习UI5的MVC模型吧,这次我们来探讨视图与控制器. 1 视图 在MVC中,视图用来定义和渲染UI.在UI5中,视图的类型是可以自定义的,除了以下预定义的四种视图类型之外,你也可以定制自己的视 ...
- zookeeper 学习命令
ls /TianheSoft/nodesls /TianheSoft/nodes/localhost_2181-0000000000ls /TianheSoft/propsls /TianheSoft ...
- [CSAPP笔记]Binary , Unsigned , Signed 之间的相互装换
LaTex+MarkDown+Pandoc组合套件写博客的处女作,试试效果.各自的分工为:Latex下编辑公式,在Sublime Text 2下使用Markdown排版,最后用Pandoc导出. 摘要 ...
- js之方向检测
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【排序】快速排序,C++实现
原创博文,转载请注明出处! 本文代码的github地址 # 基本思想 ”快速排序“是对”冒泡排序“的改进. 基本原理:基于分治法,在待排线性表中取一个元素pivot作为枢轴值,通过一趟排序将待排线性表 ...
- BZOJ5281: [Usaco2018 Open]Talent Show(01分数规划&DP)
5281: [Usaco2018 Open]Talent Show Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 166 Solved: 124[S ...
- 实现同时提交多个form(基础方法) 收集(转)
方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...
- linux压缩打包等
删除 rm -rf 目录 tar -zcvf /home/xahot.tar.gz /xahot tar -zcvf 打包后生成的文件名全路径 要打包的目录 例子:把/xahot文件夹打包后生成一个/ ...
- Scrapy源码研究前戏
一.Twisted的使用 在 Twisted 中,有一种特殊的对象用于实现事件循环.这个对象叫做 reactor.可以把反应器(reactor)想象为 Twisted 程序的中枢神经.除了分发事件循环 ...