setInterval与setTimeout使用规则与注意点

开发工具与关键技术：工具：Visual Studio 2015 ，技术：前端、JavaScript
作者：范子超撰写时间：2019年2月23日

setInterval() 间隔指定的毫秒数不停地执行指定的代码。
window.setInterval() 方法可以不使用window前缀，直接使用函数 setInterval()。
setInterval() 第一个参数是函数（function），第二个参数是间隔的毫秒数。
注意： 1000毫秒是1秒。

注意： 是不停地执行指定的代码，如果你没有清除这个 setInterval ，那么它将会按照你所设置的间隔时间不停地运行所指定的代码。
下面这段代码表示每隔3000毫秒便执行一次myf函数。

setInterval(myf, 3000);
function myf(){
	a++;
    $("#toolbar").append('<p>这是第' + a + '次自增</p>');
}

注意：setInterval 括号中调用的方法不需要加(),如果加了，那么运行到 setInterval 的时候是不会起作用的，不过会帮你运行一次所调用的方法。
下面这段代码也能与上面那段起到相同的作用。

setInterval(function () {
	a++;
	$("#toolbar").append('<p>这是第' + a + '次自增</p>');
}, 3000);

利用 clearInterval() 可以停止 setInterval() 方法执行的函数代码。
window.clearInterval() 方法可以不使用window前缀，直接使用函数 clearInterval()。
要使用 clearInterval() 方法，在创建 setInterval() 时你必须使用变量来承载它，而这个变量可以设置为全局变量，也可以设置为局部变量，这需要根据 clearInterval() 方法来定义，只要能保证 clearInterval() 方法能够检索到这个变量就行。
如下代码便可以停止 setInterval() 方法执行的函数代码。

var add;
var a = 0;
$(document).ready(function () {
	var Interval = setInterval(myf, 1000);
	add = setInterval(function () { a++ }, 3000);
	setTimeout(function () { clearInterval(Interval); clearInterval(add) }, 10000);
});
function myf() {
	$("#toolbar").append('<p>这是第' + a + '次自增</p>');
};

下面是效果图：
在这里插入图片描述
setTimeout() 暂停指定的毫秒数后执行指定的代码。
setTimeout() 的使用规则和 setInterval() 是相同的，而停止 setTimeout() 则是使用 clearTimeout() 方法，clearTimeout() 与 clearInterval() 的使用规则也是相同的。

总结：setInterval() 与 setTimeout() 的使用规则与停止规则都是相同的，区别在于前者是在时间间隔后不断地执行，需要写停止的代码。而后者则是时间间隔后执行一次便结束了，不需做其他操作。

setInterval与setTimeout使用规则与注意点

猜你喜欢