Question

为什么vue的方法不起作用？

2017-12-14

64

javascript vue.js

我尝试在 vue 上编写一个方法，为什么 'clickA' 不起作用，但 'clickB' 可行？

注意：解决方案应该让 throttle 函数像 'clickB' 一样工作。

new Vue({
  el: '#app',
  methods: {
    clickA: function() {
      _.throttle(function() {
        var date = new Date();
        var time = date.toLocaleTimeString();
        console.log('A clicked', time)
      }, 1000)
    },
    clickB: _.throttle(function() {
      var date = new Date();
      var time = date.toLocaleTimeString();
      console.log('B clicked', time)
    }, 1000)
  }
});

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>
<div id="app">
  <button type="button" @click="clickA">A</button>
  <button type="button" @click="clickB">B</button>
</div>

Answer 1

_.throttle 返回一个新函数。仔细想想，可能有点难以理解，但确实有道理！

clickB 绑定到 _.throttle 返回的函数。

但是，在 clickA 中，您没有将点击操作绑定到 _.throttle 创建的函数。

Answer 2

_.throttle 返回一个受限制的函数。

因此，您可以定义一个新函数：

var slowThing = _.throttle(fastThing)

或者，您可以将函数定义为属性：

object: {
    slowThing: _.throttle(fastThing)
}

但在上面的 clickA 中，受限制的函数未被分配：

slowThing: function() {
    // this creates a new function but doesn't execute it
    _.throttle(fastThing)
}