setInterval和setTimeout定时器

1,文本框自增(重零开始)每隔一秒递增1

<input type="text" name="name" value="0" id="txt" /><script type="text/javascript">
        window.onload = function () {
            setInterval(function () {
                //获取文本框对象
                var obj = document.getElementById(‘txt‘);
                //获取value值
                var txtvalue = parseInt(obj.value);
                obj.value = txtvalue = txtvalue + 1;
            },1000);
        }
    </script>

计时器setInterval会返回一个计时器id,可以用来清除计时器

function f1() {
    alert(‘嘎嘎‘);
}
 //计时器,返回值是该计时器的id
 var setId = window.setInterval(f1, 2000);
//清除计时器方法,参数是一个计时器的id,清除计时器
 window.clearInterval(setId);

2,setTimeout(这个计时器就执行一次)

//这个计时器就执行一次
var setId= setTimeout(function () {
    alert(‘加载了‘);
}, 1000);
clearTimeout(setId);//清除计时器

例子:标题栏跑马灯

<input type="button" name="name" value="向左走" id="btnLeft" />
    <input type="button" name="name" value="向右走" id="btnRight" />
<script type="text/javascript">
        var def = ‘left‘;
        function f1() {
            def = ‘left‘;
        }
        function f2() {
            def = ‘right‘;
        }
        window.onload = function () {
            setInterval(function () {
                //获取标题内容
                var tit = document.title;
                if (def == ‘left‘) {
                    document.title = tit.substr(1) + tit.charAt(0);
                } else if (def == ‘right‘) {
                    document.title = tit.charAt(tit.length - 1) + tit.substr(0, tit.length - 1);
                }
            }, 1000);
            document.getElementById(‘btnLeft‘).onclick = f1;
            document.getElementById(‘btnRight‘).onclick = f2;
        };
    </script>
时间: 2024-10-10 02:34:54

setInterval和setTimeout定时器的相关文章

javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.setInterval与setTimeout定时器的用法与区别.讲得不对的地方,烦请大家指正,还望前辈.大牛多多指教! 二.window对象与document对象的用法和区别 window是全局对象,document是window对象的一个属性它也是一个对象.如图: document对象指的页面这个文档

关于setInterval和setTImeout中的this指向问题

前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0; function Obj (){ this.num = 1, this.getNum = function(){ console.log(this.num); }, this.getNumLater = function(){ setTimeout(function(){ console.log(this.num)

JavaScript定时调用函数(SetInterval与setTimeout)

setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码. 区别:window.setTimeout("function",time)://设置一个超时对象,只执行一次,无周期 window.setInter

JS里设定延时:js中SetInterval与setTimeout用法

js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象 SetInterval为自动重复,setTimeout不会重复. clearTimeout(对象) 清除已设置的se

javascript中的setInterval()和setTimeout()用法比较

setTimeout()和setInterval() 何时被调用执行 定义 setTimeout()和setInterval()经常被用来处理延时和定时任务.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除. 从定义上我们可以看到两个函数十分类似,只不过前者执行一次,而后者可以执行多次,两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒

setInterval和setTimeout区别

setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式 所以,完全是不一样的 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function",time) 设置一个超时对象 setInterval("function&

第46天:setInterval与setTimeout的区别

js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.今天对js的setTimeout方法做一个系统地总结. setInterval与setTimeout的区别 说道setTimeout,很容易就会想到setInterval,因为这两个用法差不多,但是又有区别,今天一起总结了吧! 1.setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: code (必

setInterval()和setTimeout()的区别

setInterval()和setTimeout()的区别: 以上两个方法都可以用作定时器,它们在语法形式非常的类似,但是功能上却区别巨大,下面结合实例介绍一下它们的异同点. 一.setInterval()函数的语法结构: setInterval(code,interval) setInterval()函数可周期性执行一段代码,也就是说代码会被周期性不断的执行下去. 函数具有两个参数: 第一个参数:规定周期性执行的代码,并不一定非要是一个函数. 第二个参数:规定周期的时间跨度,单位是毫秒,一秒等

JavaScript中SetInterval与setTimeout的用法详解

在写H5游戏时经常需要使用定时刷新页面实现动画效果,比较常用即setTimeout()以及setInterval(),但是大家对SetInterval与setTimeout的用法了解吗,下面通过本文给大家详解js中SetInterval与setTimeout的用法,需要的朋友参考下 setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_