问

javascript - js实现并发的问题？？

缘zhi韵_297 发布于 2022-11-11 07:05

dom

 情况1：
  domObj.moveEle(ele , con)  ele元素能够移动。

 情况2：
  domObj.moveEle(ele , con) ;
  domObj.moveEle(ele1 , con1);
  ele1 元素能够被移动 ， ele 元素的移动功能没了。

出现的问题：
  无法实现多元素注册此功能时，多元素都能移动（只能够最后一个注册的元素移动）；

出现的原因：
 由于都是采取变量赋值的方法，所以，最后一个注册的元素 能够实现此功能

解决办法：实在是没想出如何巧妙的解决这个问题，求大神赐教...

代码： 
    var domObj = {
       con: null , 
       ele: null ,
       // 移动范围
       conW: null ,
       conH: null ,
    
       eleW: null ,
       eleH: null ,
    
       minLV: 0 ,
       maxLV: 0 ,
       minTV: 0 ,
       maxTV: 0 ,
       
       canMove: false ,
    
       sox: 0 ,
       soy: 0 ,
       eox: 0 ,
       eoy: 0 ,
    
       ox: 0 ,
       oy: 0 ,
    
       curLV: 0 ,
       curTV: 0 ,
       eLV: 0 ,
       eTV: 0 ,
    
       moveEventInit: function(ele  , con){
         this.ele = ele;
         this.con = con;
         this.conW = getEleW(con);
         this.conH = getEleH(con);
         
         this.eleW = getEleW(ele);
         this.eleH = getEleH(ele);
    
         this.maxLV = Math.floor(Math.max(0 , this.conW - this.eleW));
         this.maxTV = Math.floor(Math.max(0 , this.conH - this.eleH));
    
       } ,
    
       moveEventMouseMove: function(event){
           if (domObj.canMove) {
              var e = event || window.event;
              e.preventDefault();
    
              domObj.eox = e.clientX;
              domObj.eoy = e.clientY;
              domObj.ox = domObj.eox - domObj.sox;
              domObj.oy = domObj.eoy - domObj.soy;
              domObj.eLV = Math.max(domObj.minLV , Math.min(domObj.maxLV , domObj.sLV + domObj.ox));
              domObj.eTV = Math.max(domObj.minTV , Math.min(domObj.maxTV , domObj.sTV + domObj.oy));
    
              addCss(domObj.ele , {
                 left: domObj.eLV + 'px' , 
                 top: domObj.eTV + 'px'
              });
    
           }
       } , 
    
       moveEventMouseDown: function(event){
               console.log('你点击了登陆界面！')
               var e = event || window.event;
               e.stopPropagation();
               domObj.sox = e.clientX;
               domObj.soy = e.clientY;
               domObj.sLV = Math.ceil(parseFloat($gs(domObj.ele , 'left')));
               domObj.sTV = Math.ceil(parseFloat($gs(domObj.ele , 'top')));
               domObj.canMove =true;
               addCss(domObj.ele , {
                 cursor: 'move'
               });
               // console.log('你淡季了我！');
       } ,
    
       moveEventMouseUp: function(){
          domObj.canMove = false;
          addCss(domObj.ele , {
             cursor: 'default'
          });
       } ,
    
       moveEle: function(ele , con){
           this.moveEventInit(ele , con);
    
           // 注册事件
           ele.addEventListener('mousedown' , this.moveEventMouseDown);
           window.addEventListener('mousemove' , this.moveEventMouseMove ,false);
           window.addEventListener('mouseup' , this.moveEventMouseUp ,false);
       }
       
    }

1 个回答

你这个代码的改动稍微就有点大了，现在代码的问题在于domObj里所有变量都是公有的，但你却想通过这个domObj去分别控制所有ele，数据是共享的，显然有问题，提供一个类实现的思路：

// 构造函数，保存私有变量
function DomObj (ele, con) {
  this.ele = ele;
  this.con = con;
  // ...
}

// 公有方法，注意domObj改为this获取当前实例下的变量
DomObj.prototype.moveEventMouseMove = function (event) {
  if (this.canMove) {
    var e = event || window.event;
    e.preventDefault();

    this.eox = e.clientX;
    this.eoy = e.clientY;
    this.ox = this.eox - this.sox;
    this.oy = this.eoy - this.soy;
    this.eLV = Math.max(this.minLV , Math.min(this.maxLV , this.sLV + this.ox));
    this.eTV = Math.max(this.minTV , Math.min(this.maxTV , this.sTV + this.oy));

    addCss(this.ele , {
       left: this.eLV + 'px' , 
       top: this.eTV + 'px'
    });

  }
}

// 往下继续添加DomObj.prototype.xxx = function () {...}


// 调用方式
var obj1 = {ele: xxx, con: xxx};
var obj2 = {ele: xxx, con: xxx};
var eles = [obj1, obj2];
eles.forEach(function (i, obj) {
  // 初始化
  var instance = new DomObj(obj.ele, obj.con);
  // 下面就可以使用instance对相关ele进行事件绑定操作了
  // ...
});

2022-11-12 01:54 回答

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签