Sujet JavaScript 4 : Limitation

Contenu

• Avant-propos
• 1.
2. Limitation avancée
• Écrit à la fin

(recommandation d'apprentissage gratuite : tutoriel vidéo javascript )

Préface

Parlons de la limitation - une autre idée d'​​optimisation des fonctions.

Prenons l'événement mobile comme exemple

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        #wrapper {
            width: 100%;
            height: 140px;

            background: rgba(0, 0, 0, 0.8);

            color: #fff;
            font-size: 30px;
            font-weight: bold;
            line-height: 140px;
            text-align: center;
        }
    </style>
    <p></p>

    <script>
        var count = 1;
        function moveAction () {
            oWrapper.innerHTML = count++;
        }

        var oWrapper = document.querySelector(&#39;#wrapper&#39;);
		oWrapper.onmousemove = moveAction;
    </script>

L'effet est le suivant :

1. mise en œuvre

Le principe du throttling est simple :

Si vous déclenchez un événement en continu, il ne sera exécuté qu'une seule fois dans un intervalle de temps spécifique.

Concernant la mise en œuvre de la limitation, il existe deux méthodes de mise en œuvre courantes :

Idée d'horodatage
1. Idée de minuterie

1.1 Idée d'horodatage

Comme son nom l'indique, l'intervalle de temps est contrôlé via deux horodatages :

On retire le courant. Horodatage
1.  ; now
puis soustrayez l'horodatage de
2. lorsque a été exécuté auparavant (la première valeur est 0) prev S'il est grand , prouver Une fois la maintenance de l'intervalle de temps terminée, exécutez l'événement spécifié et mettez à jour
3. now - prev > waitSelon cette idée, nous pouvons implémenter la première version du code : prev

   oWrapper.onmousemove = throttle(moveAction, 1000);function throttle(func, wait) {
       var _this, arg;
       var prev = 0; // 上一次触发的时间，第一次默认为0
   
       return function () {
           var now = Date.now(); // 触发时的时间
           _this = this;
           if (now - prev > wait) {
               func.apply(_this, arg); // 允许传入参数，并修正this
               prev = now; // 更新上一次触发的时间
           }
       }}

   Jetons un coup d'oeil et utilisons-le, quel est l'effet :

Nous pouvons voir :

Lorsque la souris entre, l'événement

est exécuté immédiatement

sera exécuté une fois toutes les 1 seconde, et sera exécuté deux fois après avoir bougé pendant 2,5 secondes, ce qui signifie que l'action
1. ne sera plus exécutée après ça s'arrête.
1.2 Idée de minuterie
2. Utiliser une minuterie pour garantir le nombre de déclencheurs d'événements dans l'intervalle

Créer une minuterie

pour enregistrer si dans la

période

 ;

détermine si le timer existe, et s'il existe, il se terminera directement, sinon l'événement sera exécuté
1. timer ; encore une fois après l'heure, et la minuterie sera effacée de l'appareil ;
2. Lorsqu'un événement est déclenché, nous définissons une minuterie. Lorsque l'événement est à nouveau déclenché, si la minuterie existe, elle ne sera pas exécutée. jusqu'à ce que la minuterie soit exécutée, puis la fonction sera exécutée pour effacer la minuterie, afin que vous puissiez régler la minuterie suivante.

function throttle(func, wait) {
    var _this, arg;
    var timer; // 初始化
    return function () {
        _this = this; // 记录this
        arg = arguments; // 记录参数数组
        if (timer) return; // 时候未到
        timer = setTimeout(() => {
            func.apply(_this, arg); // 允许传入参数，并修正this
            timer = null;
        }, wait);
    }}

3. Voyons à quoi ressemble l'effet avec ceci : wait

Cependant, nous pouvons voir :

Lorsque la souris est déplacé, l'événement ne sera pas exécuté immédiatement ;

Une fois la souris personnalisée

il sera exécuté une fois après un intervalle

1. 1.3 La différence entre les deux idées
2. wait
2. Limitation avancée

Combiner deux idées pour compléter une méthode de limitation qui peut être exécutée immédiatement et réexécutée après l'arrêt du déclencheur :

	时间戳	定时器
“起点”	立即执行	n 秒后执行
“终点”	停止后不会执行	停止会再执行一次

// 第三版function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;

    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次触发 func 剩余的时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
         // 如果没有剩余的时间了或者你改了系统时间
        if (remaining  wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;}

L'effet est démontré comme suit :

Quand je regardais le code, j'ai dû imprimer les données à plusieurs reprises avant de comprendre pourquoi cela a été fait. ensemble~

Recommandations d'apprentissage gratuites associées :

javascript

(vidéo)

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!