zoukankan      html  css  js  c++  java
  • 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,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,widthNum,height:heightNum});
    		//console.log();
    }
    	                
    document.onmouseup = function(e){
    	document.onmousemove = document.onmouseup = null;
    }

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

    小结:

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

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

  • 相关阅读:
    python抢票开发——设备预约助手实现
    树莓派的基本网络配置
    python 端口扫描程序
    数据通讯与网络 第五版第24章 传输层协议-TCP协议部分要点
    数据通讯与网络 第五版第24章 传输层协议-UDP协议部分要点
    利用python开发的flappy bird 游戏
    EMACS 快捷键笔记
    python程序中用类变量代替global 定义全局变量
    在树莓派下对多个串口转USB设备进行设备名称绑定操作
    python 编写的经纬度坐标转换类
  • 原文地址:https://www.cnblogs.com/amingxiansen/p/13167175.html
Copyright © 2011-2022 走看看