Should I setTimeout when JavaScript(jQuery) is heavy for events such as keydown, keyup, and so on JavaScript(jQuery)

Should I use setTimeout to handle heavy tasks when the following actions occur?

$( document ).bind("keydown keyup", function(e){
    if(e.type==="keydown"){
        ... // Heavy handling
    }
    if(e.type==="keyup"){
        ... // Another action
    }
});

In other words, should I do it like this?

$( document ).bind("keydown keyup", function(e){
    if(e.type==="keydown"){
        setTimeout(param1,param2){
            ... // Heavy handling
        },0,prm1,prm2);
    }
    if(e.type==="keyup"){
        ... // Another action
    }
});

If one key is keydown, I will take heavy action, and if keyup, I will take another light action, but I feel that the heavy action has ended in the middle.
Actually, ctrl+Z is done with keydown, but if it ends in the middle, or if you do keydown for a long time, it feels like it works properly.
Even if it's a heavy process, it doesn't take many seconds.I think it's hundreds of milliseconds to one second at most.

I'm sorry, I recently started JavaScript and jQuery, so I don't think I understand it well.Thank you for your cooperation.

capture.Take the result of heavy processing and do something else.
In fact, when I do undo, I try to undo changes such as the size of elements on my browser.

It's hard to understand, so I'll catch it.
In the above process, keydown and keyup share the processing, but I believe that the unknown functions subtracting events in keydown and keyup are processed asynchronously separately.However, I have just used JavaScript, so I may not understand it correctly.

keydown and it doesn't finish until the heavy process starts and keyup and I wonder if that's why something strange is happening.

If the keydown side has finished heavy processing and you want keyup to be processed (because keyup has been completed and you need to wait properly, I would appreciate it if you could let me know.

JavaScript was looking for something like a critical section, but can't it be done locally?

javascript jquery asynchronous

2022-09-30 21:14

2 Answers

I guessed that there were probably several simultaneous asynchronous patterns that I didn't know which method to use to complete with callback.

Use $.Deferred, $.when to run multiple asynchronous operations simultaneously and wait for them to complete.

I'll just give you an example, but I don't know what I'm doing, so I try to wait until the animation of animate with different completion times is completed.

If you want to do the same as in the example, you should take only keyup and methodize keydown and keyup to handle keyup events when they fire.

$( document).ready(function(){

  $(document).on('keyup', function(e){

    // Wait for the keydown process and perform the keyup process.
    $.when(
      keydownProcess()
    .done(
      keyupProcess
    );
  });

  $('input').on('click', function(){
    $('.target') .width(300).height(50).text(');
  });
});
  
// equivalent to keydown processing  
// return completion after the longest asynchronous processing with varying completion times
function keydownProcess()
{
  $('#target1') .text('keydown process');
  vard = new$.Deferred;
  $.when(
    // write an asynchronous method here
    $('#target1') .stop().animate({width:150},500),
    $('#target2') .stop().animate({width:150},1000)
  .done(function(){
    d.resolve();
  });
  return.promise();
}

// equivalent to keyup processing  
function keyupProcess()
{
  $('#target1') .text('keyup process');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<input type="button" value="return"/>
<divid="target1" class="target" style="background:#aaff;width:300px;height:50px">/div>
<divid="target2" class="target" style="background:#aaffaa;width:300px;height:50px">/div>

Reference URL:
http://techblog.yahoo.co.jp/programming/jquery-deferred/
http://qiita.com/yuku_t/items/1b8ce6bba133a7eaeb23

2022-09-30 21:14

There was a good article, so I'll introduce it to you.

Try organizing JavaScript synchronization, asynchronous, callback, and promis - Qiita

As a general assumption, JavaScript is single threaded.
This means JavaScript cannot be processed in parallel.

Therefore, the keyup process will not run until the keydown heavy process is finished.(Unless you're using setTimeout, and you're allowing interrupts.but)

varc=0
$(document).bind("keydown keyup", function(e){
  $console=$("#console")
  c+ = 1
  if(e.type==="keydown"){
    start=end=new Date().getTime()
    while(end-start<1000){
      end = new Date().getTime()
    }
    $console.append(e.type+":"+c+"<br>")
  }
  if(e.type==="keyup"){
    $console.append(e.type+":"+c+"<br>")
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
Event Console
<divid="console">
</div>

I tried to check the order of keydown and keyup, but keyup ran after keydown.
Wait 1 second at keydown.

2022-09-30 21:14

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656