how can I reuse the functions of my code javascript?

Question

I wanted to make an effect similar to "click and hold" of this page, but with some changes, with svg forms, the point is that I did two functions that do what I wanted to do very well, but at the moment I introduced another svg form, the Data of the effect is transferred to the other, affecting the execution of the functions, the question is, how do I prevent this from happening?

Note: The best way to see what is happening is to let one of the two complete.

Here is an example of what I have programmed

of course I leave you all the code that I have been working

//Efect Drivers
class EffectValues {
    constructor(count, time, initOffset, label) {
        this.count = count;
        this.time = time;
        this.initOffset = initOffset;
        this.label = label;
    }
}

//Controlers
let counter; //it will be interval controller
let globalCount = 0;

//Call objects DOM
const loader = document.querySelector('.loader');
const circle = document.querySelector('.circle');
const svgText = document.querySelector('.svgText');
const textSvg = document.querySelector('.textSvg');

//Preloader svg
const startCircle = new EffectValues(0, 3, 1300, circle);
const showEffect = new EffectValues(0, 3, 500, svgText);
//Mouse events

// Circle
loader.addEventListener('mousedown', e => {
    increase(e, startCircle);
});

loader.addEventListener('mouseup', e => {
    decrease(e, startCircle);
});

// Text SVG

textSvg.addEventListener('mousedown', e => {
    increase(e, showEffect);
});

textSvg.addEventListener('mouseup', e => {
    decrease(e, showEffect);
});

//main functions
const increase = (e, { count, initOffset, time, label }) => {
    let flag = true;
    // console.log(flag);
    clearInterval(counter);
    while (e.type == 'mousedown') {
        counter = setInterval(() => {
            if (globalCount < initOffset) {
                count = initOffset - globalCount;
                label.style.strokeDashoffset = count;
                globalCount++;
            }
        }, time);
        break;
    }
    return flag;
};

const decrease = (e, { count, initOffset, time, label }) => {
    let flag = true;
    // console.log(flag);
    clearInterval(counter);
    while (e.type == 'mouseup') {
        counter = setInterval(() => {
            if (globalCount >= 0 && globalCount < initOffset) {
                count = -globalCount + initOffset;
                label.style.strokeDashoffset = count;
                globalCount--;
            } else {
                flag = false;
            }
        }, time);
        break;
    }
    return flag;
};

:root {
    --dark: #2f3640;
    --dark-light: #353b48;
    --blue: #192a56;
    --blue-dark: #273c75;
    --cian: #0097e6;
    --cian-light: #00a8ff;
    --orange: #c23616;
    --orange-light: #e84118;
}

* {
    margin: 0;
    padding: 0;
}
body {
    min-height: 100vh;
    background-color: var(--dark);
    display: flex;
    justify-content: center;
    align-content: center;
}
.loader {
    position: relative;
    width: 50%;
    height: 100vh;
}
.loader svg {
    position: absolute;
    width: 550px;
    height: 550px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 10;
    stroke: var(--cian);
    stroke-linecap: round;
    transform: translate(5px, 5px);
    stroke-dasharray: 1300;
    stroke-dashoffset: 1300;
}

.textSvg {
    position: relative;
    width: 40%;
}

.textSvg svg text {
    stroke: var(--orange-light);
    fill: none;
    stroke-width: 3;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
        <title>Loader</title>
    </head>
    <body>
        <div class="loader">
            <svg>
                <circle class="circle" cx="200" cy="200" r="200"></circle>
            </svg>
        </div>
        <div class="textSvg">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="1413"
                height="274"
                viewBox="0 0 1413 274"
            >
                <text
                    class="svgText"
                    transform="translate(0 198)"
                    fill="#c6e0ee"
                    font-size="100"
                    font-family="MonotypeCorsiva, Monotype Corsiva"
                >
                    <tspan x="0" y="0">David Figueroa</tspan>
                </text>
            </svg>
        </div>
    </body>
    <script src="main.js" defer></script>
</html>

I have been looking for information but nothing has helped me.

Beforehand thank you very much

Linux Torvalds · Accepted Answer · 2020-08-19 14:25:23Z

You can implement your requirements by moving global variables and functions inside the class. Codepen here

//Efect Drivers
class EffectValues {
    constructor(time, initOffset, label) {
        this.time = time;
        this.initOffset = initOffset;
        this.label = label;
    this.counter;
    this.globalCount = 0;
    }

  increase(e) {
    let flag = true;
    // console.log(flag);
    clearInterval(this.counter);
    while (e.type == 'mousedown') {
      this.counter = setInterval(() => {
        if (this.globalCount < this.initOffset) {
          const count = this.initOffset - this.globalCount;
          this.label.style.strokeDashoffset = count;
          this.globalCount++;
        }
      }, this.time);
      break;
    }
    return flag;
  };

  decrease(e) {
    let flag = true;
    // console.log(flag);
    clearInterval(this.counter);
    while (e.type == 'mouseup') {
      this.counter = setInterval(() => {
        if (this.globalCount >= 0 && this.globalCount < this.initOffset) {
          const count = -this.globalCount + this.initOffset;
          this.label.style.strokeDashoffset = count;
          this.globalCount--;
        } else {
          flag = false;
        }
      }, this.time);
      break;
    }
    return flag;
  };
}

//Call objects DOM
const loader = document.querySelector('.loader');
const circle = document.querySelector('.circle');
const svgText = document.querySelector('.svgText');
const textSvg = document.querySelector('.textSvg');

//Preloader svg
const startCircle = new EffectValues(3, 1300, circle);
const letterEffect = new EffectValues(3, 500, svgText);
//Mouse events

// Circle
loader.addEventListener('mousedown', e => {
    startCircle.increase(e);
});

loader.addEventListener('mouseup', e => {
    startCircle.decrease(e);
});

// Text SVG

textSvg.addEventListener('mousedown', e => {
    letterEffect.increase(e);
});

textSvg.addEventListener('mouseup', e => {
    letterEffect.decrease(e);
});

Collectives™ on Stack Overflow

how can I reuse the functions of my code javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related