JS 定时器 setTimeout 与 setInterval 的区别和用法
1、setTimeout
延迟执行,只执行一次,定时炸弹、炸了就没了
window.setTimeout(function(){要执行的事件},间隔时间毫秒);
2、setInterval
无限循环,每一次循环有间隔时间,一般不要小于20毫秒
它是有返回值的,可以用一个变量来接收这个定时器对象
window.setInterval(function(){要执行的事件},间隔的时间毫秒);
3、clearInterval
关闭定时器
window.clearInterval(要关闭的定时器对象);
一旦执行这句代码,会立刻停止此定时器对象的执行
4、offset
当前即时的对象的高度、宽带、位置,直接到浏览器上去找
var v = document.getElementById('a') v.offsetWidth // 当前的宽带
v.offsetHeight // 当前的高度
v.offsetLeft //当前距离左侧位置
v.offsetTop //当前距离上方位置
v.offsetParent //当前起点位置
实例
例1、点击按钮,按钮本身的长度发生变化,并且位置移动
<input type="button" value="按钮" id="a" />
<script type="text/javascript">
var v = document.getElementById('a')
v.onclick = function () {
v.style.width = v.offsetWidth + + "px"; //长度改变
v.style.left = v.offsetLeft + + "px"; // 位置移动,位置发生改变时必须要有定位 +100向右移动,-100向左移动
}
</script>
例2、点击按钮,按钮本身的长度、位置持续变化
<input type="button" value="按钮" id="a" /> <script type="text/javascript">
var v = document.getElementById('a')
v.onclick = function () {
window.setInterval(function () {
v.style.width = v.offsetWidth + + "px";
v.style.left = v.offsetLeft + + "px";
}, )
}
</script>
例3、 在例2的基础上让定时器停下
<input type="button" value="按钮" id="a" /> <script type="text/javascript">
var v = document.getElementById('a')
v.onclick = function () {
var t= window.setInterval(function () { //先用 var t 接收 window.setInterval 的值,这个值就是定时器对象
if (v.offsetLeft >)
{
window.clearInterval(t)
}
v.style.width = v.offsetWidth + + "px";
v.style.left = v.offsetLeft + + "px";
}, )
}
</script>
5、计时器
<button id="btn_Phone" click="SetInter()">获取验证码</button> <script type="text/javascript"> function SetInter() {
time = ;
$("#btn_Phone").attr("disabled", true);
var myset = setInterval(
function countDown() {
if (time === ) {
$("#btn_Phone").attr("disabled", false);
$("#btn_Phone").html("重新获取验证码");
clearInterval(myset);
return;
}
else {
time--; $('#btn_Phone').html(time + "秒后重新获取");
}
}, );
} </script>
JS 定时器 setTimeout 与 setInterval 的区别和用法的更多相关文章
- setTimeout()和setInterval()的区别
JS学习 - setTimeout()和setInterval()的区别 相同点 setTimeout 和 setInterval的语法相同.他们都有两个参数,一个是将要执行的代码字符串,还有一个是以 ...
- setTimeout和setInterval的区别以及如何写出效率高的倒计时
1.setTimeout和setInterval都属于js中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直 ...
- 【转】JS中setTimeout和setInterval的最大延时值详解
前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...
- setTimeout与setInterval的区别
setTimeout与setInterval的区别:1.setTimeout设置后隔指定时间后只会执行一次2.setInterval设置后会每隔指定时间执行一次3.setTimeout一般在方法内部使 ...
- js,setTimeout与setInterval的用法
1.setTimeout与setInterval的区别 setTimeout: 1.直接使用的话,按照指定 的时间,只执行一次传入的函数参数. 2.函数的终止使用clearTimeout. setIn ...
- 定时器setTimeout()和setInterval()使用心得整理
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函 ...
- javascript中的两个定时函数setTimeOut()和setInterVal()的区别
js中经常性要用到间隔几秒或暂停几秒执行某个函数, 简单介绍我从网上收集到setTimeOut()和setInterVal()的区别1.setInterVal()介绍 1)定义 setInterval ...
- Javascript 笔记与总结(2-13)定时器 setTimeout 和 setInterval
定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...
- setTimeout()与setInterval()方法区别介绍
计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别,下面为大家简单介绍下,希望对大家有所帮助 计时器setTimeout()和setInterval ...
随机推荐
- ASP.NET Core 2.1 源码学习之 Options[3]:IOptionsMonitor
前面我们讲到 IOptions 和 IOptionsSnapshot,他们两个最大的区别便是前者注册的是单例模式,后者注册的是 Scope 模式.而 IOptionsMonitor 则要求配置源必须是 ...
- Windows10卡顿,磁盘 内存占用100%或比较多
1.关闭服务:Superfetch: 2.结束antimalware service executable进程,gpedit.msc下依次点击“计算机配置/管理模板/Windows组件/Windows ...
- 拟物设计和Angular的实现 - Material Design
Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...
- Git之初识
我的Github地址:https://github.com/shinianzongjishinianxin 初见总是美好的,可是我第一次看到github有点纠结,因为看不懂,然而最终半蒙半猜还是注册完 ...
- Lerning Entity Framework 6 ------ Inserting, Querying, Updating, and Deleting Data
Creating Entities First of all, Let's create some entities to have a test. Create a project Add foll ...
- Codeforces Round #425 (Div. 2) B. Petya and Exam(字符串模拟 水)
题目链接:http://codeforces.com/contest/832/problem/B B. Petya and Exam time limit per test 2 seconds mem ...
- odoo-开发笔记 列表视图 增加记录弹出窗口效果
editable="bottom" 增加该标签的效果是,添加记录的时候,在原列表视图上一行一行添加; 去掉该标签之后,那么增加新记录的时候,会以弹出窗口的方式实现. 如果弹出的窗口 ...
- Dev Label显示不同颜色字体
labelControl1.Text = "<size=14>Size = 14<br>" + "<b>Bold</b> ...
- MapReduce中的partitioner
1.日志源文件: 1363157985066 13726230503 00-FD-07-A4-72-B8:CMCC 120.196.100.82 i02.c.aliimg.com 24 27 2481 ...
- 自动化部署-从maven到shell脚本到jenkins
Java代码自动部署 [ ①Java代码自动部署-总结简介] 代码部署是每一个软件开发项目组都会有的一个流程,也是从开发环节到发布功能必不可少的环节.对于Java开发者来说,Java代码的发布部署也是 ...