Wie kann ich ein "Warten, es wird verarbeitet ..!" System?

Question

Hier ist mein Code:

function sleep (time) { 
 
    return new Promise((resolve) => setTimeout(resolve, time)); 
 
} 
 

 
$("body").on('click', '.fa-check', function(e) { 
 

 
    // sleep() emulates a short waiting time as ajax's request 
 
    sleep(1000).then(() => { 
 
    $('.fa-check').not(this).removeClass('checked'); 
 
    $(this).toggleClass('checked'); 
 
    }); 
 

 
});

.fa-check { 
 
    color: #aaa; 
 
    cursor: pointer; 
 
} 
 

 
.fa-check.checked { 
 
    color: #44b449; 
 
}

<script src="https://use.fontawesome.com/9e9ad91d21.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>answer1</p> 
 
<i class="fa fa-check" aria-hidden="true"></i> 
 
<hr> 
 
<p>answer2</p> 
 
<i class="fa fa-check checked" aria-hidden="true"></i> 
 
<hr> 
 
<p>answer3</p> 
 
<i class="fa fa-check" aria-hidden="true"></i>

Wie ich in meinem Codes kommentiert habe, habe ich eine kurze Wartezeit als Ajax-Anforderung emuliert haben. Jetzt möchte ich dem Benutzer "es ist Verarbeitung" zeigen, wenn er auf eines dieser checked-icons klickt.

Aber ich möchte das tun, indem diese aufgegebenes Symbol Ausschalten/auf als Warte (es ist die Verarbeitung) Zeit: Ich kann ein png wie dies unter dem Symbol verwenden. Derzeit, wenn ich auf ein Häkchen-Symbol klicke, passiert nichts, und nach 1 sec ändert sich die grüne Farbe. Jetzt möchte ich etwas in diesem 1 sec tun, um den Benutzer zu zeigen "das System funktioniert, bitte warten ..".

Das Aktivieren/Deaktivieren des Kontrollkästchens kann eine gute Idee sein. Jeder weiß, wie kann ich das tun?

EDIT: Ich möchte kein Bild verwenden. Ich möchte nur die Farbe dieses Überprüfungssymbols ändern. Wie eine Lampe, die sich einschaltet und ausschaltet.

Answer 1

1. Benutzer klickt auf eines dieser Symbole abgeschlossen ist. 2. Dieses Symbol beginnt zu blinken. 3. Nach einer Weile (in diesem Fall 1 Sek.) Hört das Blinken auf. 4. dann überprüft className hinzugefügt.

können Sie .fadeToggle() mit Dauer verwenden auf 1000/x wo x wird einige Male .fadeToggle() sollte während sleep() Aufruf

function sleep (time) { 
 
    return new Promise((resolve) => setTimeout(resolve, time)); 
 
} 
 

 
function blink (time) { 
 
    $(this).fadeToggle(time, function() { 
 
    if (++n < t) { 
 
     return blink.call(this, time) 
 
    } else { 
 
     n = 0; 
 
    } 
 
    }) 
 
} 
 

 
var duration = 1000; 
 
var n = 0; 
 
var t = 10; 
 
var blinks = duration/t; 
 

 
$("body").on('click', '.fa-check', function(e) { 
 
    // sleep() emulates a short waiting time as ajax's request 
 
    $.when(blink.call(this, blinks), sleep(duration)) 
 
    .then(() => { 
 
    $('.fa-check').not(this).removeClass('checked'); 
 
    $(this).toggleClass('checked'); 
 
    }); 
 

 
});

.fa-check { 
 
    color: #aaa; 
 
    cursor: pointer; 
 
} 
 

 
.fa-check.checked { 
 
    color: #44b449; 
 
}

<script src="https://use.fontawesome.com/9e9ad91d21.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>answer1</p> 
 
<i class="fa fa-check" aria-hidden="true"></i> 
 
<hr> 
 
<p>answer2</p> 
 
<i class="fa fa-check checked" aria-hidden="true"></i> 
 
<hr> 
 
<p>answer3</p> 
 
<i class="fa fa-check" aria-hidden="true"></i>

zu simulieren "wink" oder Blinkeffekt genannt werden

Answer 2

Das ist ehrlich gesagt ganz einfach, machen Sie ein div, das nur das Ladebild hat.

<div id="loading_image"> 
<img src="loader.gif"> 
</div> 

es jetzt so schnell anzuzeigen, wie die jQuery Wunsch es begonnen wird, und verstecken, wenn es

$("body").on('click', '.fa-check', function(e) { 
    //show the loader 
    $("#loading_image").show(); 
    // sleep() emulates a short waiting time as ajax's request 
    sleep(1000).then(() => { 
    $('.fa-check').not(this).removeClass('checked'); 
    $(this).toggleClass('checked'); 
    //hide loader now 
    $("#loading_image").hide(); 
    }); 

});