Как разделить переменную между 2 разными функциями? - PullRequest
Новая
       34

Как разделить переменную между 2 разными функциями?

0 голосов
/ 17 февраля 2019

У меня есть 2 функции, которые называются click для ПК и swipe для оператора мобильной связи.Каждый раз, когда вы активируете эти функции, переменная myCount увеличивается.Но проблема в том, что myCount увеличивается вдвое, когда я нажимаю кнопку на мобильном операторе.

Как передать переменные между функциями в javascript

По ссылке вышеЯ пытался передать переменную с помощью вложенной функции, например, так: 

<!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>

Но для этого нужно сначала нажать кнопки, если вы хотите запустить функцию istouched.После этого myCount снова увеличивается в два раза.

Вот как я до сих пор: 

<!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>

Я ожидаю получить значение приращения myCount между двумя различными функциямии сохраните это значение для следующего приращения.Таким образом, все выглядит так, как если бы вы щелкнули по функции a 3 раза, а по нажатой функции b 2 раза, тогда myCount было бы 5, а не 3 и 2.

Какие-нибудь решения?

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Если ваша переменная объявлена ​​в той же области, что и все ваши функции, вам не нужно передавать ее между функциями, поскольку она всегда будет обновляться в родительской области.Только если ваши функции находятся за пределами этой области, вам понадобится альтернативный способ отслеживания значения.Смотрите пример: 

(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>
0 голосов
/ 18 февраля 2019

Вы можете сделать это с помощью Шаблон шины событий , который позволяет вам обмениваться данными между несколькими различными функциями.

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 

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

Подробнее о шине событий

...