settimeout代替setinterval解决setinterval跳过队列的问题

今天给大家分享一个就是关于setinterval的问题。首先了解setinterval，说白了就是一个定时器setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
　　setinterval()用法
　　setInterval(code,millisec[,“lang”])

后面就两个参数code是你的js代码，millisec为时间间隔，以毫秒计，
setTimeout是异步执行的，堆栈中碰到setTimeout会交给浏览器内核处理，等待setTimeout达到触发条件（即设定的时间），再返回给执行队列。简而言之，就是计时的这个操作是在浏览器端进行的，在计时完成后，将settimeout中的操作放入事件队列中。
比如我有以下一个简单的需求，就是从第三方工具爬取数据，然后每隔多少秒进行插入到数据库，这个就用到的以上的setinterval的问题，但是时间间隔太短之后就发现点击事件啥的都失效， 然而这块的原因就是请求的异步问题，具体的就是因为js的单线程的问题，这个不懂的童鞋可以问问度娘去看看，然而数据量一大就是会很吃内存，然后就想到了用settimeout的方法企业代替setinterval的问题。首先大体思路还是就是写一个延时器然后循环递归，下面我就拿我写的实验去简单介绍咋样使用，首先就是我利用apifox工具mock几百条数据，然后将几百条数据进行提交给后台，
h5的代码

<button @click="starthandle">导入到数据库</button>

starthandle(){
	var time=null;
	//首先明确思路，就是当延时器递归的时候就是将每一次的数据进行组装成data，可以进行索引操作。
	//初始化的索引值；
	var num=0,；
	//从第一条数据的时候开始插入
	var max_length=this.data.list;//这块的list就是请求第三方的网站爬取的数据。
	var that=this；
	setTimeout(function timer(){
	that.$http({
		url:''，//请求的插入的接口
		method："",
		data:{//插入数据库的数据},
		}).then((data)=>{
		num++;
			//这块就是请求不管成功与否，让索引+1，每次请求的时候，插入的数据依次	插入请求的几百条数据的每一条。
		}).catch(err=>{

		console.log(err)
		})
	if(num === max_length){
	return;
	//判断当请求的数据刚好是请求的数据最后一条插完之后不在执行
	}
	time = setTimeout(timer,500)
})
}

这样就简单的实现了，但是在比如要写一个停止的按钮的时候，注意一点就是clearTimeout(time)发现没有效果，这时候可以在前面加上一个clearTimeout(time)的问题就ok了