How to share a variable between 2 different functions?

Question

I have 2 functions that are called click for PC and swipe for Mobile statement. Everytime you active those functions, a variable myCount increases. But the problem is myCount increases double when I click the button on mobile statement.

How do i pass variables between functions in javascript

According to the above link, I've tried to pass the variable by using nested function something like this:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen" ref="">
      * {
        margin: 0;
        padding: 0;
      }
      .page1 {
        position: relative;
        width: 100vw;
        height: 100vh;
        background-color: grey;
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
      }
      .buttons {
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
      }
      .prev {
        position: absolute;
        left: 0;
        margin: 0 40px;
      }
      .shrink {
        position: absolute;
        flex-grow: 1.5;
      }
      .next {
        position: absolute;
        right: 0;
        margin: 0 40px;
      }
    </style>
  </head>
  <body>
    <div class="page1">
      <div class="buttons">
        <div class="button prev">Prev</div>
        <div class="shrink"></div>
        <div class="button next">Next</div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(function stripeAnimeModule() {
        // Variables (for Click)
        var _ = $('#stripe > .container > .grid > .inline-grid'),
            screen = $('.page1'),
            buttons = $('.page1 > .buttons > .button'),
            myCount = 1,
            x,
            dist;
        // functions
        function isclicked() {
          buttons.on({click: clicked})
          function clicked(e) {
            myCount += 1;
            istouched(myCount);
          }
        }
        function istouched(p) {
          screen.bind({touchstart: touchStart, touchmove: touchMove, touchend: touchEnd})
          console.log(p);
          function touchStart(e) {
            return x = e.touches[0].clientX;
            console.log(p);
          }
          function touchMove(e) {
            var drag = e.touches[0].clientX;
            var dist = Math.sqrt(x + drag);
            e.preventDefault();
          }
          function touchEnd(e) {
            var dist = e.changedTouches[0].clientX - x;
            console.log('basic log: ' + dist, myCount);
          }
        }
        isclicked();
      })
    </script>
  </body>
</html>

But this one must have to click the buttons first if you want to start istouched function. After that, myCount increases double again.

This is how I've got so far:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen" ref="">
      * {
        margin: 0;
        padding: 0;
      }
      .page1 {
        position: relative;
        width: 100vw;
        height: 100vh;
        background-color: grey;
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
      }
      .buttons {
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
      }
      .prev {
        position: absolute;
        left: 0;
        margin: 0 40px;
      }
      .shrink {
        position: absolute;
        flex-grow: 1.5;
      }
      .next {
        position: absolute;
        right: 0;
        margin: 0 40px;
      }
    </style>
  </head>
  <body>
    <div class="page1">
      <div class="buttons">
        <div class="button prev">Prev</div>
        <div class="shrink"></div>
        <div class="button next">Next</div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(function stripeAnimeModule() {
        // Variables
        var screen = $('.page1'),
        buttons = $('.page1 > .buttons').find('button'),
        myCount = 1,
        x,
        dist;
        // functions
        $(function istouched() {
          screen.bind({click: clicked, touchstart: touchStart, touchmove: touchMove, touchend: touchEnd})
          function clicked(e) {
            if (buttons.data('clicked', true)) {
              myCount += 1;
              console.log(myCount);
            }
          }
          function touchStart(e) {
            return x = e.touches[0].clientX;
          }
          function touchMove(e) {
            var drag = e.touches[0].clientX;
            var dist = Math.sqrt(x + drag);
            e.preventDefault();
            console.log(x, drag);
          }
          function touchEnd(e) {
            var dist = e.changedTouches[0].clientX - x;
            myCount += 1;
            console.log('distance is: ' + dist, 'myCount is: '+ myCount);
          }
        })
      })
    </script>
  </body>
</html>

My expectation is to get a increment value myCount between 2 different functions, and store that value for next increment. So it goes like if you clicked function a 3rd times, swiped function b 2nd times then myCount would be 5, not 3 and 2.

Any solutions?

daremachine · Accepted Answer · 2019-02-17T21:25:49.330

You can do that with Event bus pattern which allow you share your data between multiple different functions.

HTML

<h2>COUNT: <span data-count>0</span></h2>

<button id="btn1">Push Me 1</button><br><br>

<button id="btn2">Push Me 2</button>

JS event bus pattern

var EventManager = {
    subscribe: function(event, fn) {
        $(this).bind(event, fn);
    },
    publish: function(event) {
        $(this).trigger(event);
    }
};

// Register your custom code which can publish and subscribe to events
EventManager.subscribe("increaseClickSwipeValue", function() {
    $('span[data-count]').text(Counter.increaseValue());
    // do something other   
});

// counter object which hold value
var Counter = {
  value: 0,

  increaseValue: function() {
    this.value = this.value+1;
    return this.value;
  }
};

// listeners anywhere
$('#btn1').on('click', function() {
  EventManager.publish("increaseClickSwipeValue");
});

$('#btn2').on('click', function() {
  EventManager.publish("increaseClickSwipeValue");
});

JSFIDDLE

More about event bus

score 1 · Answer 2 · answered Feb 17 '19 at 21:28

If you variable is declared in the same scope as all your functions, you should not need to pass it between the functions as it will always be update in the parent scope. Only if your functions are outside of this scope would you need some alternative way to keep track of the value. See example:

(function() {
  var $screen = $(".page1"),
    $buttons = $(".button"),
    myCount = 1,
    x,
    dist;

  function update() {
    console.log("distance is: " + dist, "myCount is: " + myCount);
    $('.count').text(myCount);
  }

  function clicked(e) {
    myCount += 1;
    update();
  }

  function touchStart(e) {
    return (x = e.touches[0].clientX);
  }

  function touchMove(e) {
    var drag = e.touches[0].clientX;
    var dist = Math.sqrt(x + drag);
    e.preventDefault();
  }

  function touchEnd(e) {
    var dist = e.changedTouches[0].clientX - x;
    myCount += 1;
    update();
  }

  $buttons.on('click', clicked);
  $screen.on('touchstart', touchStart);
  $screen.on('touchmove', touchMove)
  $screen.on('touchend', touchEnd)
})();

* {
  margin: 0;
  padding: 0;
}

.page1 {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: grey;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}

.buttons {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}

.prev {
  position: absolute;
  left: 0;
  margin: 0 40px;
}

.shrink {
  position: absolute;
  flex-grow: 1.5;
}

.next {
  position: absolute;
  right: 0;
  margin: 0 40px;
}

.count {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page1">
  <div class="buttons">
    <div class="button prev">Prev</div>
    <div class="shrink"></div>
    <div class="button next">Next</div>
  </div>
  <div class="count"></div>
</div>

Thank you for answering, but `myCount` still increases twice when I click the button on the mobile statement. — l3lue, Feb 17 '19 at 21:43
Are you clicking the button elements on mobile when starting the touch event? As this would cause the count to increase twice as the click event is still triggered on mobile as well as the touchend event. — Ginger Wizard, Feb 18 '19 at 06:51
You could replace the click event with mousedown which should negate this. — Ginger Wizard, Feb 18 '19 at 06:56

How to share a variable between 2 different functions?

2 Answers2