Warum Vue-Methode kann nicht funktionieren?

Question

Ich versuche eine Methode auf Vue zu schreiben, warum das 'ClickA' nicht funktionieren kann, aber 'ClickB' funktioniert?

Hinweis: Die Lösung sollte die throttle-Funktion funktionieren wie die "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/vue@2.5.10/dist/vue.min.js"></script> 
 
<script src="https://unpkg.com/lodash@4.17.4/lodash.min.js"></script> 
 
<div id="app"> 
 
    <button type="button" @click="clickA">A</button> 
 
    <button type="button" @click="clickB">B</button> 
 
</div>

Answer 1

_.throttlekehrt eine neue Funktion. Denken Sie darüber nach, es mag ein bisschen schwierig sein, den Kopf herumzulegen, aber es macht Sinn!

clickB ist an diese Funktion gebunden, die _.throttle zurückgibt.

In clickA binden Sie die Klickaktion jedoch nicht an die Funktion, die _.throttle erstellt.

Answer 2

_.throttle gibt eine gedrosselte Funktion zurück.

So können Sie eine neue Funktion definieren:

var slowThing = _.throttle(fastThing)

Sie können auch eine Funktion als Eigenschaft definieren:

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

Aber in clickA oben ist die gedrosselte Funktion ist nicht zugewiesen:

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