js window对象中 setTimeout方法和setInterval方法的作用,用法与区别。

window对象作为BOM中的顶层对象,而作为window对象中使用频繁的setInterval方法和setTimeout方法更显得尤为重要。

① setInterval() 方法

定义和用法

① setInterval() 方法可按指定的周期(以毫秒记)来调用函数或计算表达式。
② setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec) ;
code (必需)。要调用的函数或要执行的代码串。// 传一个函数 或者代码串
millisec(必需)。周期性执行 code 的时间间隔,以毫秒计。 // 自定义设置的周期 (以毫秒计)

返回值

该函数有返回值,从而传递给 window.clearInterval() 从而取消对 code 的周期性执行。

setInterval()使用

function a(){
     
                var i=0;
                console.log(++i);
            }
        setInterval(a,3000); // 参数a 就是传递需要执行的函数 , 3000 就是自定义周期 3000毫秒执行一次

结果: 函数a会每隔三秒执行一次。
如果需要停止函数a的执行,则可以定义一个变量接收setInterval返回的值,将该值作为clearInterval()的参数执行该方法,就可以结束setInterval()的执行。

② setTimeout() 方法

定义和用法

setTimeout() 方法用于指定毫秒数后调用函数或计算表达式。

语法

setTimeout(code,millisec) ;
code (必需)。要调用的函数后要执行的 JavaScript 代码串。// 传一个函数 或者代码串
millisec (必需)。在执行代码前需等待的毫秒数 // 自定义时间 (以毫秒计)

返回值

该函数也有返回值,可以传递给 window.clearTimeout () 从而取消对 code 的执行。

setTimeout()用法

function a(){
     
                console.log("气球爆炸");
            }
            var time = setTimeout(a,5000); //参数a 就是设置要执行的函数  5000自定义设置时间,

结果:函数a会在5秒后执行,导致气球爆炸。
如果想要在气球爆炸之前停止该函数,则用time接收函数的返回值作为clearTimeout()参数执行该方法,则可以阻止这悲剧的发生。

③ 两者的区别

相同点 : 两者语法一样。
不同点 : setTimeout 只执行一次 而setInterval会一直执行
setInterval被重复开启 是无法关闭
setTimeout被重复开启几次 就需要关闭与开启同样的次数

注意:setTimeout()与setInterval() 相比,编码要少一些,但做复杂控制时, setTimeout() 的返回值没有及时清除会经常造成不可预料的意外。
在使用setTimeout()或setInterval() 的时候,一定要注意的他们的返回值的问题,否则会出现各种异常。

其实采用setTimeout方法也可以实现setInterval的效果。
只需要在函数里面,递归的使用setTimeout方法即可。

//  如果要用setTimeout实现setInterval效果 则需要递归调用
            (function a(){
     
                console.log("气球爆炸");
                var time = setTimeout(a,3000); //递归调用自己
            })();

结果 : 每隔三秒就有一个气球会爆炸。

你可能感兴趣的:(js,前端,javascript)