当前位置：网站首页>Anti shake and throttling

Anti shake and throttling

2022-07-25 23:27:00 【Dragon eyes】

One 、 Shake proof

1、 What is anti shake ？
Anti shake strategy （debounce） When the event is triggered , Delay n second Later Execution callback , If in this n The second event is triggered again , be Retime .
2、 Application scenario of anti shake
· The user inputs a string of strings in succession in the input box , You can use the anti shake strategy , Only after the input is completed , To execute the query request , This can effectively reduce the number of requests , Save requested resources .
3、 Anti shake code case
Read the last article for details , Taobao Search box case Taobao Search box case

Two 、 throttle

1、 What is throttling ？
Throttling strategy （throttle）, seeing the name of a thing one thinks of its function , Sure Reduce for a period of time The event Trigger frequency
2、 Application scenarios of throttling ？
① The mouse continuously triggers an event （ If you click ）, Only triggers once per unit time ;
② Listen and calculate the position of the scroll bar when lazy loading , But you don't have to trigger every slide , It can reduce the frequency of calculation , Without having to waste CPU resources .
3、 Concept of throttle valve ：
Throttle valve is empty , Express You can perform the next operation ; Not empty , Indicates that the next operation cannot be performed ;
The current operation has been executed , The throttle valve must be closed Reset to empty , Indicates that the next operation can be performed ;
After each operation , must First judge whether the throttle valve is empty .
4、 Throttling code case
Mouse follow effect The code is as follows ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <style> html, body {
      margin: 0; padding: 0; overflow: hidden; } #angel {
      position: absolute; } </style>
</head>

<body>
    <img src="./angel.gif" alt="" id="angel">
    <script> $(function() {
      //  Get picture elements  var angel = $('#angel') // 1. Predefined one timer throttle valve  var timer = null //  Listen to the of the document mousemove event  $(document).on('mousemove', function(e) {
      // 3. Judge whether the throttle valve is empty , If it's not empty , Then the interval from the last execution is insufficient 16 millisecond  if (timer) {
      return } timer = setTimeout(function() {
      //  Set the location of the picture  $('#angel').css('left', e.pageX + 'px').css('top', e.pageY + 'px') // 2. When the mouse following effect is set , Empty timer throttle valve , It is convenient to turn on the delayer next time  console.log('ok'); timer = null }, 16) }) }) </script>
</body>

</html>

Insert picture description here

3、 ... and 、 Summarize the difference between anti shake and throttling

The difference between anti shake and throttling
① Shake proof ： If the event is triggered by frequency , Anti shake can guarantee Only the last trigger takes effect ; front N Multiple triggers are ignored ;
② throttle ： If the event is triggered frequently , Throttling can Reduce the frequency of event triggering , therefore , Throttling is Selectively Execute some events ;

原网站

版权声明
本文为[Dragon eyes]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190503501774.html