Qu'est-ce que l'anti-shake et la limitation en javascript

En JavaScript, anti-shake signifie que la fonction ne sera exécutée qu'une seule fois dans les n secondes après le déclenchement d'un événement haute fréquence. Si l'événement haute fréquence est à nouveau déclenché dans les n secondes, le temps sera recalculé ; que lorsque l'événement est déclenché en continu, assurez-vous que la fonction de traitement des événements n'est appelée qu'une seule fois au cours d'une certaine période de temps.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

1. Anti-tremblement

La fonction ne sera exécutée qu'une fois dans les n secondes après le déclenchement d'un événement haute fréquence. Si l'événement haute fréquence est déclenché à nouveau dans les n secondes, le temps sera recalculé.

• Idée :
  Événement de liaison d'action, l'événement est déclenché après un certain temps après que l'action se soit produite. Pendant cette période, si l'action se reproduit, attendez un certain temps avant de déclencher l'événement.

function debounce(fn) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      return function () {
        clearTimeout(timeout);
         // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { 
        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内
        // 如果还有字符输入的话，就不会执行 fn 函数
          fn.apply(this, arguments);
          //因为sayHi函数是在全局中运行，this默认指向了window
          //所以要用apply将inp的this传入
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖

Par exemple, si vous exigez qu'après que l'utilisateur ait saisi une chaîne de caractères dans la zone de saisie, une requête ajax soit automatiquement envoyée si l'anti-tremblement n'est pas effectué, l'utilisateur modifiera la chaîne à chaque fois. (supprimer des caractères ou saisir de nouveaux caractères) enverra une demande, mais si un traitement anti-tremblement est effectué, après que l'utilisateur a saisi un caractère, la chaîne n'a pas changé après 0,5 seconde (cela signifie très probablement que l'utilisateur a terminé la saisie de la chaîne ), alors la demande sera envoyée. Si la chaîne est modifiée dans les 0,5 secondes (cela signifie très probablement que la chaîne actuelle n'est pas la dernière chaîne à saisir par l'utilisateur), la demande ne sera pas envoyée temporairement et le La demande continuera à être recalculée pendant 0,5 seconde jusqu'à ce que l'utilisateur fasse une pause de plus de 0,5 seconde avant de renvoyer la demande.

2. Limitation

Lorsque des événements sont déclenchés en continu, assurez-vous que la fonction de traitement des événements n'est appelée qu'une seule fois au cours d'une certaine période de temps. Par conséquent, la limitation diluera la fréquence d'exécution de la fonction

• Idée :
  Événement de liaison d'action, l'événement sera déclenché après un certain temps après que l'action se soit produite. Pendant cette période, si l'action se reproduit, l'action se produira. être ignoré jusqu'à ce que l'événement soit exécuté. Ce n'est qu'alors qu'il peut être redéclenché.

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次
          //循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

3. Combiné avec des scénarios d'application

debounce (anti-shake)

• Recherchez Lenovo, lorsque les utilisateurs continuent de saisir des valeurs, utilisez l'anti-shake pour économiser les ressources de la demande.

• Lorsque la fenêtre déclenche le redimensionnement, l'ajustement constant de la taille de la fenêtre du navigateur déclenchera continuellement cet événement. Utilisez l'anti-tremblement pour qu'il ne se déclenche qu'une seule fois

accélérateur(accélérateur)

• Souris, cliquez en continu pour. trigger, mousedown (ne se déclenche qu'une fois par unité de temps)

• Surveillez les événements de défilement, par exemple s'il faut glisser vers le bas pour charger automatiquement davantage, utilisez l'accélérateur pour juger

[Apprentissage recommandé : Tutoriel avancé javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!