Home / Questions / 79157
Accepted
vdjkelly
Asked: 2020-06-17 02:50:09 +0800 CST 2020-06-17 02:50:09 +0800 CST

Make the last event written in a textarea the one executed

  • 772

I don't know if I make myself understand with this but I'm trying to ensure that the last thing written in a textarea or input field is the one executed to be translated in the azure translator api. I do this with ajax and laravel, I leave the code hanging and can you help me.

With the jquey code, when I write in the textarea field, the each event is executed at the same time, I check if the textarea is not empty due to spaces, this in turn performs the ajax but if it has a delay in the first letter written and the last one is execute quickly example: h the first one executed hello the last one written the first one had a delay and the last one was executed quickly but the first one that was the h was executed later and instead of translating hello it translates the h for me.

Is there no way for the last written to be executed?

<textarea id="translate_q" name="q" maxlength="5000" rows="9" cols="100" placeholder="comienza a escribir" style="height: 159px">{{ $text  or ''}}</textarea>

e there where the jquery code is executed

$('#translate_q').each(function(){
        var keyed = $('#translate_q').val().replace(/[\n]/g,'<br />');
        if(keyed){
            var langfrom = document.getElementById("translate_source").value;
            var langto = document.getElementById("translate_target").value;
            var textfrom = document.getElementById("translate_q").value;
            $.ajax({
                type: "GET",
                contentType: "application/x-www-form-urlencoded;charset=ISO-8899-1",
                url: "/translator",
                data: {
                    langfrom: langfrom,
                    langto: langto,
                    textfrom: keyed
                },
            }).done(function(data) {
                // body...
                document.getElementById("translate_result").value = data;
                $("#action_copy").removeClass("off")
                $("#action_link").removeClass("off")
                $("#action_email").removeClass("off")
                $("#action_listen").removeClass("off")
            });
        }
    });
jquery

1 Answers

  1. Best Answer

    You can try this, which is as I told you in the comments:

    const textarea = $('#test');
let id = false;
textarea.on('keydown', function(e) {
    if(id) {
    window.clearTimeout(id);
  }

    id = setTimeout(function() {
      sendToApi();
    },1000);

});


function sendToApi()
{
    console.log($('#test').val());
}

    You can use the jquery on change event of the textarea:

    const textarea = $('#test');

textarea.on('change', function(e) {
     sendToApi();
});

function sendToApi()
{
    console.log('send');
}

    With this, when the focus leaves the textarea, the change event of the textarea will be executed.

    • 1