Principes de mise en œuvre de la fonction Anti-rebond et de la fonction Throttle

Cet article présente principalement les principes de mise en œuvre de la fonction Debounce et de la fonction Throttle. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent se référer à

Les principes et la mise en œuvre de la fonction Debounce et Throttle. .

• La limitation et l'anti-rebond sont deux méthodes permettant d'améliorer les performances d'exécution des fonctions de traitement d'événements en réduisant l'exécution du traitement logique réel. La limitation ne réduit pas considérablement le nombre de déclencheurs d'événements. . Les deux sont en effet déroutants en termes de compréhension conceptuelle.

• debounce force la fonction à être exécutée une seule fois dans un certain laps de temps, tandis que throttle force la fonction. à exécuter à un rythme fixe. Ils peuvent considérablement améliorer l'expérience utilisateur lorsqu'il s'agit de certains événements DOM fréquemment déclenchés.

Lors de la gestion d'événements tels que le redimensionnement, le défilement, le déplacement de la souris et les touches enfoncées/touchées/pressées, nous ne voulons généralement pas que ces événements soient déclenchés trop fréquemment, en particulier le programme d'écoute. Cela implique de nombreux calculs ou des opérations très gourmandes en ressources.

À quelle fréquence ? Prenons l'exemple de mousemove. Selon la réglementation DOM niveau 3, "Si la souris bouge continuellement, le navigateur doit déclencher plusieurs événements mousemove consécutifs." Cela signifie que le navigateur déclenchera plusieurs événements mousemove consécutifs en fonction du comportement de l'utilisateur si son minuteur interne est activé. permet La vitesse de déplacement de la souris pour déclencher l'événement mousemove. (Bien sûr, si vous déplacez la souris assez rapidement, par exemple en la "swipant", le navigateur ne déclenchera pas cet événement). Les événements tels que resize, scroll et key* sont similaires.

1. Ce que fait la fonction anti-rebond, c'est forcer une fonction à être exécutée une seule fois au cours d'une certaine période de temps continue, même si elle aurait été appelée plusieurs fois. Nous espérons que la fonction d'écoute correspondante sera exécutée après que l'utilisateur ait arrêté une opération pendant un certain temps, au lieu d'exécuter la fonction d'écoute autant de fois que le navigateur déclenche l'événement pendant l'opération de l'utilisateur.

function debounce(fn, delay) {

  // 定时器，用来 setTimeout
  var timer

  // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数，传递给 fn
    var context = this
    var args = arguments

    // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
    clearTimeout(timer)

    // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
    // 再过 delay 毫秒就执行 fn
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

debounce renvoie une fermeture. Cette fermeture sera toujours appelée en continu et fréquemment, mais à l'intérieur de la fermeture, elle restreint l'exécution de la fonction d'origine fn, forçant fn à n'être appelée qu'en continu. Exécuté une seule fois après l'arrêt de l'opération.

Throttle

Le concept de throttle est plus facile à comprendre, qui consiste à fixer la vitesse à laquelle une fonction est exécutée, ce qu'on appelle "throttle" . Normalement

/**
*
* @param fn {Function}   实际要执行的函数
* @param delay {Number}  执行间隔，单位是毫秒（ms）
*
* @return {Function}     返回一个“节流”函数
*/

function throttle(fn, threshhold) {

  // 记录上次执行的时间
  var last

  // 定时器
  var timer

  // 默认间隔为 250ms
  threshhold || (threshhold = 250)

  // 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数，传递给 fn
    var context = this
    var args = arguments

    var now = +new Date()

    // 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃
    // 执行 fn，并重新计时
    if (last && now <p> après avoir appliqué les deux, l'efficacité sera directement provoquée. Si vous ne parvenez toujours pas à comprendre pleinement la différence entre l'anti-rebond et l'accélérateur, vous pouvez accéder à cette page pour voir une comparaison visuelle des deux. <br><img src="https://img.php.cn//upload/image/571/717/740/1531471276493544.png" title="1531471276493544.png" alt="Principes de mise en œuvre de la fonction Anti-rebond et de la fonction Throttle"></p><p>Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois ! </p><p>Recommandations associées : </p><p class="comments-box-content"></p><p class="mt20 ad-detail-mm hidden-xs"><a title="对于JavaScript中的函数重载的说明" href="http://www.php.cn/js-tutorial-406490.html" target="_blank">Instructions sur la surcharge de fonctions en JavaScript</a><br></p><p class="mt20 ad-detail-mm hidden-xs"><a title="利用JavaScript中发出HTTP请求的方法" href="http://www.php.cn/js-tutorial-406487.html" target="_blank">Utilisation des méthodes JavaScript pour créer Requêtes HTTP en </a><br></p>

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!