vue函数同步执行遇到的问题

在用vue动态修改属性值的环节中，遇到了关于函数的执行顺序问题，因为业务的不同，尝试用回调、.then、和同步执行，统统踩在坑里。。。

 

var widthNum;
var heightNum;
document.onmousemove = function(e){
	oDrag.style.width = e.pageX - disx-195+'px';
	oDrag.style.height = e.pageY - disy-85+'px';
	widthNum = e.pageX - disx-195;
	heightNum = e.pageY - disx-85;
}
var i = 0;
console.log(this);

this.$emit('changeSize',{theId:i,width:widthNum,height:heightNum});
console.log(widthNum);
	                
document.onmouseup = function(e){
	document.onmousemove = document.onmouseup = null;
}

 

原来是这么写的，问题很明显，我每次拿到的widthNum都不是最新生成的，而是上面定义的，拿到的是空值（undefined）.

问题实际上出在上面的onmousemove函数没有执行之前就会先执行后面的$emit函数，导致拿不到我们想要的值；

解决这个问题，最直接的想法可能是1.用一个判断，上面函数执行完毕再开始后面的语句；2.回调函数；3.用闭包或者从上面的函数中return我们所需要的数值；

尝试过发现有坑，爬不上来。

其中一个关键原因是$emit不能放在函数中执行，因为函数中拿不到这个我们需要的this。

然后，想到在函数外面申明变量在函数内修改变量的值，是个不错的思路。

进一步为什么不将this赋值给变量在函数内部调用呢？？

于是：

var self = this;
document.onmousemove = function(e){
	oDrag.style.width = e.pageX - disx-195+'px';
	oDrag.style.height = e.pageY - disy-85+'px';
	let widthNum = e.pageX - disx-195;
	let heightNum = e.pageY - disx-85;
	/*为了可以获取到最新的width和height的值，巧用var self = this;将外部的this引入到内部，实现动态引用的效果*/
	var i = 0;
	self.$emit('changeSize',{theId:i,width:widthNum,height:heightNum});
		//console.log();
}
	                
document.onmouseup = function(e){
	document.onmousemove = document.onmouseup = null;
}

干净整洁，仅仅是换了个思路，就豁然开朗了。

小结：

从不懂的地方入手，坑是难免的，踩过的坑都将变成一种财富，当回过头来你会发现自己怎么会掉到一个深不过脚踝的小水潭里了呢？

午休时间思路凌乱，有看不明白的欢迎留言，也欢迎指正交流。