我在 Laravel/VueJS 上做喜歡/不喜歡系統。
我的系統作業正常，但我想避免垃圾郵件發送者。
喜歡按鈕：
<a v-on:click="like(10, $event)">
<i class="fas fa-heart"></i>
</a>
10 是 post id，它是在 laravel Blade 中生成的...
這是我試圖避免垃圾郵件發送者的做法：
const app = new Vue({
el: '#app',
data() {
return {
allowed: true,
};
},
methods: {
like: function (id, event) {
if (this.allowed) {
axios.post('/posts/' id '/like', {
post_id: id,
})
.then((response) => {
this.allowed = false; //Set allowed to false, to avoid spammers.
..... code which changes fa-heart, changes class names, texts etc ....
// send notification to user
Vue.toasted.show('Bla bla bla successfuly liked post', {
duration: 2000,
onComplete: (function () {
this.allowed = true //After notification ended, user gets permission to like/dislike again.
})
});
但是這里缺少一些東西，或者我做錯了什么。當我非常快速地點擊喜歡的圖示并檢查請求時，axios 會發送 3-4-5 個請求（取決于你點擊的速度）
只有在那之后 3-5 個請求才會data.allowed變成false. 為什么？我想要：
- 允許 = 真;
- 用戶點擊喜歡 -> allowed = false; > 第二次點擊“不允許再次點擊，因為上次通知未結束”；
- 上一個通知結束 -> allowed = true;
- ... 環形
uj5u.com熱心網友回復：
在this.allowed = false;被稱為beeing直到API呼叫完成這樣你就可以更多的時間內垃圾郵件。將其設定false為 comprobation 后立即if (this.allowed)。
if (this.allowed) {
this.allowed = false; // Then do the call
}
uj5u.com熱心網友回復：
對我來說有效，@click.once
<q-btn
@click.once ="selectItemFiles(options)"
/>
無論用戶點擊多少次，動作只會產生一次
uj5u.com熱心網友回復：
like: function (id, event) {
// first, check if the `like` can be sent to server
if (!this.allowed) return;
// remember that we are sending request, not allowed to `like` again
this.allowed = false;
var self = this; // you need this to remember real this
axios.post('/posts/' id '/like', {
post_id: id,
}).then((response) => {
..... code ....
// send notification to user
Vue.toasted.show('Bla bla bla successfuly liked post', {
duration: 2000,
onComplete: function () {
//After notification ended, user gets permission to like/dislike again.
self.allowed = true;
}
);
}).catch(function() {
// maybe you also need this catch, in case network error occurs
self.allowed = true;
})
....
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/354915.html
標籤：javascript 拉拉维尔 Vue.js 公理