About js Memory Leak

  node.js, question

I wrote a piece of code myself, and my friend pointed out some problems at a glance, considering the incomplete scene and so on, and then also said that there was a memory leak problem. I have not understood this thing about js memory leak all the time … please give me some advice … look at the following code where there is a problem, where there is memory leak, and if you can, please post some good articles in this regard.

/**
 *
 *
 *
 *
 * 
 */
var $=require("$");
/**
 * [getPrefix 补充前缀]
 * @param  {[type]} opt [css3 对象]
 * @return {[type]}     [css3 对象]
 */
var getPrefix=function(opt){
    var prefix=['-webkit-','-moz-','-ms-','-o-'];
    var result={};
    var i=0;
    for(var i=0;i<=prefix.length;i加加){
        if(i==prefix.length){
            for(key in opt){
                result[key]=opt[key];
            }
        }
        else{
            for(key in opt){
                result[prefix[i]加''加key]=opt[key];
            }
        }
        
    }

    return result;
};
/**
 * [getobj 重定义对象]
 * @param  {[type]} obj [description]
 * @return {[type]}     [description]
 */
var getobj=function(obj){
    if(!obj || Object.prototype.toString.call(obj) !== "[object Object]"){
        return {};
    }else{
        return obj;
    }
};
/**
 * [transition description]
 * @param  {[type]}   obj      [设置过渡 DOM]
 * @param  {[type]}   property [过渡属性]
 * @param  {[type]}   duration [过渡时间]
 * @param  {Function} fn       [过渡方式]
 * @param  {[type]}   delay    [延迟时间]
 * @param  {Function} callback [回调]
 * @return {[type]}            [description]
 */
exports.transition=function(obj,property,duration,fn,delay,callback){
    var cc_opt={
        "property":property || "all",
        "duration":duration || "0.5s",
        "fn":fn ||"linear",
        "delay":delay || "0s"
    };
    if(parseFloat(duration)>0){
        queue.duration=parseFloat(duration)*1000;
    }
    var cssopt={
        "transition":cc_opt.property加" "加cc_opt.duration加" "加cc_opt.fn加" "加cc_opt.delay
    };
    cssopt=getPrefix(cssopt);
    obj.css(cssopt);
    callback && callback.call && callback.call();
};

/**
 * [translate3d description]
 * @param  {[type]}   obj      [description]
 * @param  {[type]}   opt      [description]
 * @param  {Function} callback [description]
 * @return {[type]}            [description]
 */
exports.translate3d=function(obj,opt,callback){
    if(!this.isqueue){
        var _this=queue;
    }else{
        _this=this;
    }
    opt=getobj(opt);
    var point={
        x:opt.x!==undefined && parseFloat(opt.x)>=0?opt.x:0,
        y:opt.y!==undefined && parseFloat(opt.y)>=0?opt.y:0,
        z:opt.z!==undefined && parseFloat(opt.z)>=0?opt.z:0
    };
    var cc_opt={
        'transform':'translate3d('加point.x加'px,'加point.y加'px,'加point.z加'px)'
    };
    cc_opt=getPrefix(cc_opt);
    obj.css(cc_opt);
    callback && callback.call && callback.call();
    setTimeout(function(){
        _this.dequeue();
    },_this.duration);
    return _this;
}

/**
 * [scale3d description]
 * @param  {[type]}   obj      [description]
 * @param  {[type]}   opt      [description]
 * @param  {Function} callback [description]
 * @return {[type]}            [description]
 */
exports.scale3d=function(obj,opt,callback){
    if(!this.isqueue){
        var _this=queue;
    }else{
        _this=this;
    }
    opt=getobj(opt);
    var point={
        x:opt.x!==undefined && parseFloat(opt.x)>=0?opt.x:1,
        y:opt.y!==undefined && parseFloat(opt.y)>=0?opt.y:1,
        z:opt.z!==undefined && parseFloat(opt.z)>=0?opt.z:1
    };
    var cc_opt={
        'transform':'scale3d('加point.x加','加point.y加','加point.z加')'
    };
    cc_opt=getPrefix(cc_opt);
    obj.css(cc_opt);
    callback && callback.call && callback.call();
    setTimeout(function(){
        _this.dequeue();
    },_this.duration);
    return _this;
}
/**
 * [rotate description]
 * @param  {[type]}   obj      [description]
 * @param  {[type]}   opt      [description]
 * @param  {Function} callback [description]
 * @return {[type]}            [description]
 */
exports.rotate=function(obj,opt,callback){
    if(!this.isqueue){
        var _this=queue;
    }else{
        _this=this;
    }
    opt=getobj(opt);
    var type=false;
    var point={
        x:opt.x!==undefined && parseFloat(opt.x)>=0?parseFloat(opt.x):false,
        y:opt.y!==undefined && parseFloat(opt.y)>=0?parseFloat(opt.y):false,
        z:opt.z!==undefined && parseFloat(opt.z)>=0?parseFloat(opt.z):false,
        angle: opt.angle!==undefined && parseFloat(opt.angle)>=0?parseFloat(opt.angle):false,
    };
    var cc_opt={
        'transform':''
    };
    if(!isNaN(point.x) && isNaN(point.y) && isNaN(point.z)){
        type='rotateX';
    }
    else if(isNaN(point.x) && !isNaN(point.y) && isNaN(point.z)){
        type='rotateY';
    }
    else if(isNaN(point.x) && isNaN(point.y) && !isNaN(point.z)){
        type='rotateZ';
    }
    else if(!isNaN(point.x) && !isNaN(point.y) && !isNaN(point.z)){
        type='rotate3d';
    }
    else if(!isNaN(point.x) && !isNaN(point.y) && isNaN(point.z) && !isNaN(angle)){
        type='rotate';
    }
    else{
        throw new Error('opt参数错误!');
    }

    switch(type){
        case 'rotateX':
            cc_opt['transform']='rotateX('加point.x加'deg)';
        break;
        case 'rotateY':
            cc_opt['transform']='rotateY('加point.y加'deg)';
        break;
        case 'rotateZ':
            cc_opt['transform']='rotateZ('加point.z加'deg)';
        break;
        case 'rotate3d':
            cc_opt['transform']='rotate3d('加point.x加','加point.y加','加point.z加','加point.angle加'deg)';
        break;
        case 'rotate':
            cc_opt['transform']='rotate('加point.x加','加point.y加')';
        break;
        default:
        break;
    };

    cc_opt=getPrefix(cc_opt);
    obj.css(cc_opt);

    setTimeout(function(){
        _this.dequeue();
    },_this.duration);
    return _this;
};

/**
 * [Queue 队列函数]
 */
function Queue(){
    this.list=[];
    return this;
}
Queue.prototype={
    isqueue:true,
    duration:1,
    //出列
    dequeue:function(){
        var _this=this;
        var dofn=false;
        if(_this.getLen()>0){
            dofn=_this.list.shift();
            dofn && dofn.call && dofn();
        }else{
            return false;
        }
    },
    //入列
    enqueue:function(fn){
        var _this=this;
        _this.list.push(fn);
    },
    //初始化队列函数
    addQueueFn:function(key,fn){
        var _this=this;
        if(!_this[key]){
            _this[key]=function(){
                var _arguments=arguments;
                _this.enqueue(function(){
                    fn.apply(_this,_arguments);
                });
                return _this;
            };
        }
    },
    //获取长度
    getLen:function(){
        var _this=this;
        return _this.list.length;
    }
};
var queue=new Queue();
//添加队列函数
queue.addQueueFn("translate3d",exports.translate3d);
queue.addQueueFn("rotate",exports.rotate);
queue.addQueueFn("scale3d",exports.scale3d);

Your friend said there was a memory leak, why not ask your friend?

I don’t know how long the subject has been writing js, but I can only use the words “be fair and square”.

Don’t be afraid of memory leaks. Don’t be terrified when you hear about memory leaks.
It is normal to have memory leaks, and browsers themselves may not have time to release them. Of course, we need to optimize the code to avoid memory leaks.

You can first find out several common ways of memory leakage in js, and use Heap Profiling tools such as Chrome to detect if there is a memory leak.

Memory leak belongs to the category of optimization. If you are a beginner, don’t struggle too much. Also, in fact, many companies don’t really care about these optimization processes when developing actual projects.

Of course, your memory leak is very severe, that is another matter.