setInterval定时器函数的第二个参数为变量
当第二个参数为变量的时候,变量改变了,但是我发现执行的等待时间并没有什么变化,还是等待原本第一次设置的时长,于是我就写了几句代码测试了一下。发现了确实是这样子,好像是setInterval()函数一旦启动这个设置的时间就是固定了,不会再改变。
// 初始等待时间
let waitDate = 1000;
// 成长的小明
const GrowingPeople = {name: '小明', age: 14, sex: '男'};
// 年纪增长函数
function ageIncrease(people) {
const { age } = people;
if(age && age >= 18){
return true;
} else {
people.age = people.age + 1;
return false;
};
}
// 提示成年函数
function promptAdulthood(people) {
const { name='小刚', age=15, sex='女' } = people;
const information = `我叫${name},是个${sex}生, 今年${age}岁啦,
成年啦,可以去上网啦
`;
console.log(information);
}
// 版本1,发现设置的时间不生效
function simplePoller(queryFn, callback) {
const stop = setInterval(() => {
const res = queryFn(GrowingPeople);
if(res){
callback(GrowingPeople);
clearInterval(stop);
} else {
console.log(`我才${GrowingPeople.age}岁,还没有成年`);
}
}, waitDate * 1.5);
}
simplePoller(ageIncrease, promptAdulthood);
本来是想每执行一次,下次执行时间是上次执行时间的1.5倍,但是开始以后每次执行时间都是1秒,我觉得应该是setInterval()在初始化的时候就固定了这个执行时间,不管你这个变量之后怎么变化,它还是按初始化的时候给的值去定时执行,所以想要改变这个定时的时间,这个方式就不太合适了,换一种方式,改递归调用吧。
// 初始等待时间
let waitDate = 1000;
// 成长的小明
const GrowingPeople = {name: '小明', age: 14, sex: '男'};
// 年纪增长函数
function ageIncrease(people) {
const { age } = people;
if(age && age >= 18){
return true;
} else {
people.age = people.age + 1;
return false;
};
}
// 提示成年函数
function promptAdulthood(people) {
const { name='小刚', age=15, sex='女' } = people;
const information = `我叫${name},是个${sex}生, 今年${age}岁啦,
成年啦,可以去上网啦
`;
console.log(information);
}
function simplePoller(queryFn, callback, waitDate) {
const stop = setInterval(() => {
const res = queryFn(GrowingPeople);
if(res){
clearInterval(stop);
callback(GrowingPeople);
} else {
clearInterval(stop);
console.log(`下一次询问等待时间,${waitDate}`);
simplePoller(queryFn, callback, waitDate*1.5)
}
}, waitDate);
}
simplePoller(ageIncrease, promptAdulthood, waitDate);
这样的写法确实实现了每次等待时间,按1.5倍增加了,但是这每次函数执行都会新建一个定时器,然后再把它销毁,感觉是在浪费性能,既然setInterval()函数第二个参数既然不能使用改变的值,那么使用它的意义也不大了。还不如使用递归和setTimeout()。这样也不用每次去清除定时器了
function simplePoller(queryFn, callback, waitDate) {
setTimeout(() => {
const res = queryFn(GrowingPeople);
if(res){
callback(GrowingPeople);
} else {
console.log(`下一次询问等待时间,${waitDate}`);
simplePoller(queryFn, callback, waitDate*1.5)
}
}, waitDate);
}
simplePoller(ageIncrease, promptAdulthood, waitDate);
附上最后一次执行打印记录。
这样看起来代码简洁多了,虽然没有从本质上解决setInterval函数参数设置变量的问题,但是换了一种思路,也是可以实现的。
目前还是个前端小菜鸡,没有找到setInterval这个函数的源码,希望有大佬看到可以帮忙看看,是不是我的写法有问题,有什么更好的办法,也可以留言,交流一下呀。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!