Hi. I want to clear interval after transition end [closed]

var container    = document.querySelector(".container");
    var bar          = document.querySelector(".bar");    
    var barL         = document.getElementsByClassName("barLayer");
    var value        = document.getElementsByClassName("value");
    var compare      = document.getElementsByClassName("compare");    
    var pixelStep    = 4;
    var barNum       = 12;
    var spaceBetween = 100;
    var intervalTime = 10;
    var delayTime    = 50;

    const data       = [ 
    { brand : "SAMSUNG",  val : 40,  col : "#c00"}, 
    { brand : "APPLE",    val : 46,  col : "#0c0"}, 
    { brand : "HUAWEI",   val : 43,  col : "#f84"}, 
    { brand : "ASUS",     val : 71,  col : "#248"},    
    { brand : "XIAOMI",   val : 53,  col : "#0cc"},
    { brand : "OPPO",     val : 100, col : "#cc0"},
    { brand : "VIVO",     val : 66,  col : "#c0c"}, 
    { brand : "MOTOROLA", val : 86,  col : "#ccc"},
    { brand : "LENOVO",   val : 61,  col : "#c40"},
    { brand : "LG",       val : 93,  col : "#333"},
    { brand : "NOKIA",    val : 83,  col : "#088"}, 
    { brand : "OTHERS",   val : 51,  col : "#06c"} ]; 

    sortFunction(data, "val");

    clone(bar, container);

    for(let i = 0; i < data.length; i++){ barL[i].style.backgroundColor = data[i].col; }

    //---------------

    var myInterval = [];

    function anim(j){

    const computedStyleObj = getComputedStyle(barL[j]);
    value[j].textContent   = Math.round(parseInt(computedStyleObj.height)/pixelStep) + "K";
    compare[j].textContent = data[j].val;  
    barL[j].style.height   = value[j].style.bottom = (data[j].val * pixelStep) + "px"
    //console.log("j : ", data[j].val + " - " + parseInt(computedStyleObj.height));
    barL[j].addEventListener("transitionEnd", () =>{ console.log("j : " + j); clearInterval(myInterval[j]);});
    barL[j].addEventListener("webkitTransitionEnd",  () =>{ console.log("j : " + j); clearInterval(myInterval[j]);});
    }

    for (let i = 0; i < data.length; i++) {
    setTimeout(function() {
    myInterval[i] = setInterval(function() {anim(i);}, intervalTime);
    }, i * delayTime);
    }
    //----------------

    function clone(item, container) {
    for(let i = 0; i < barNum-1 ; i++){
    var cln = item.cloneNode(true);
    container.appendChild(cln);
    cln.style.left = ((i+1) * spaceBetween ) + "px";
    }
    }

    function sortFunction(arr, key) {
    arr.sort(function(a, b){
    let x = a[key];
    let y = b[key];
    if (x < y) {return -1;}
    if (x > y) {return 1;}
    return 0;
    });
    data.reverse();  
    }

    :root {
    --barWidth     : 80px;
    --color        : #aaa;
    --contentWidth : 1200px;
    }

    * {
    margin     : 0;
    padding    : 0;
    box-sizing : border-box;
    }

    body {
    width           : 100%;
    display         : flex;
    align-content   : center;       
    justify-content : center;
    flex-direction  : column;
    background      : var(--color);
    font-family     : 'Roboto Mono', monospace;
    }

    .container {
    position    : relative;
    width       : var(--contentWidth);
    height      : 500px;
    border      : 1px solid #0005;
    background  : #fff4;
    margin      : 10px auto;
    }

    .bar {
    position   : absolute;
    width      : var(--barWidth);

    margin     : 10px;
    display    : inline-block;
    border     : 0px solid #0005;
    bottom     : 0px;
    }

    .barLayer {
    position   : absolute;
    width      : var(--barWidth);;
    height     : 0px;
    bottom     : 0;
    }

    .value, .compare {
    position    : absolute;
    width       : var(--barWidth);
    height      : calc(var(--barWidth)/2);
    bottom      : 0px;
    font-size   : calc(var(--barWidth)/4);
    text-align  : center;
    border      : 0px solid #fff;
    line-height : calc(var(--barWidth)/2);   
    } 

    .barLayer, .value { 
    transition : all 1s linear;
    }

    <div class="container">
    <div class="bar">     
    <div class="barLayer"></div>
    <div class="value">-</div>
    <div class="compare"></div>
    </div>
    </div>  

I want to clear "interval" after transition end, but I can't get the correct height value.

Top is wrong value, bottom is the data from array. Itried some arithmetic methods, but want ot use eventListener. Thanks!

It says "It looks like your post is mostly code; please add some more details." again?! What shoul I write more? :)

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW