【js】循环内使用定时器依次完成方法调用

今天又在循环遇到了问题

需求 ： 循环体内，调用一个第三方方法，需要完成上一次调用后才能开始下一次调用，否则该方法调用时就会出现数据覆盖

想法 ： 使用map循环+定时器，但是发现每次area都是同时全部打印出来, 明明我已经做了2000ms的间隔了呀!

			var area;
			this.imageList.map((item, i) => {
				setTimeout(function() {
					area = 'mosoweCanvasComponents' + i;
					console.log(area)
					this_.$refs[area].createCanvas();
				}, 2000);
			});

正确解决办法 : 因为这里每次循环都是间隔2s, 所以循环还是同一时间触发了, 所以应该把间隔的时间做一个累加

			var area;
			this.imageList.map((item, i) => {
				setTimeout(function() {
					area = 'mosoweCanvasComponents' + i;
					this_.$refs[area].createCanvas();
				}, 2000 * i);  // 间隔时间每次循环递加就好啦
			});