如何在两个不同的函数之间共享变量？

问题描述 投票：0回答：2

我有2个函数，用于PC的click和用于Mobile语句的swipe。每次激活这些功能时，变量myCount都会增加。但问题是当我点击移动声明上的按钮时myCount增加了两倍。

How do i pass variables between functions in 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。

有解决方案吗

javascript jquery click swipe slide
2个回答
1
投票

你可以用Event bus pattern做到这一点，它允许你在多个不同的功能之间共享你的数据。

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

More about event bus

1
投票

如果变量声明在与所有函数相同的作用域中，则不需要在函数之间传递它，因为它将始终在父作用域中更新。只有当您的功能超出此范围时，您才需要一些替代方法来跟踪该值。见例子：

(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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.