Javascript Girl
  1. Javascript Girl
  3. JQuery page scroll event logic – comment accélérer
Intereting Posts
Comment détecter si un appareil mobile est émulé par Google Chrome? Comment détecter une fonction JavaScript avec une certaine signature a-t-elle été enregistrée? Convertir le format de la date étrange à court DateTime Déclaration de la méthode d'objet javascript dans la fonction constructeur vs. dans le prototype JS Regex pour faire correspondre tout à l'intérieur des accolades (y compris les accolades imbriquées): "{Je veux ceci {et ceci} et ceci dans une chaîne}" Comment supprimer une base de données dans WebSQL par programme? Préchargez le fichier MP3 avant d'utiliser le bouton Lecture Passer des params aux composants enfants dans Knockout Fixer l'en-tête de la table au sommet de la division défilable Comment empêcher les éléments enfants entraînables de se glisser les uns sur les autres? Passer des chaînes avec Single Qoute de MVC Razor à JavaScript Comment utiliser Durandal's createChildRouter Téléchargez le contenu de textarea en tant que fichier utilisant uniquement Javascript (sans serveur) Comment trier un ensemble d'objets avec plusieurs valeurs de champ en JavaScript Rendre sans mise en page lorsque le format est JS (besoin de séchage)

JQuery page scroll event logic – comment accélérer

J'ai quelques configurations d'auditeurs jQuery comme suit: 

$(document).scroll(function() { if( $(this).scrollTop() < change1) { updateBarChart('valuem', 'opencomparison'); } else if ( $(this).scrollTop() > change1 && $(this).scrollTop() < change2) { updateBarChart('valuef', 'opencomparison'); } else if ($(this).scrollTop() > change2) { updateBarChart('valuem', 'remove') //updateSteamChart('','steam') } });

C'est assez simple. Certains tableaux sont mis à jour lors du changement de défilement.

Mon problème, c'est envoyer trop de mises à jour de fonctions. J'aimerais s'il y avait un moyen d'accélérer le .scroll (function () {}). De cette façon, moins de mises à jour d'événements sont déclenchées.

Des idées?

Un moyen assez simple d'obtenir un étranglement pourrait être d'ajouter un contrôle contre une valeur aléatoire afin qu'il ne déclenche qu'un certain pourcentage du temps: 

 $(document).scroll(function() { //Only fires 10% of the time if (Math.random() < 0.1) { if( $(this).scrollTop() < change1) { updateBarChart('valuem', 'opencomparison'); } else if ( $(this).scrollTop() > change1 && $(this).scrollTop() < change2) { updateBarChart('valuef', 'opencomparison'); } else if ($(this).scrollTop() > change2) { updateBarChart('valuem', 'remove'); } } });

Alternativement, vous pouvez utiliser une minuterie de sorte qu'il ne se déclenche qu'une seule fois par x millisecondes: 

 $(document).scroll(function() { //Only fires at most once every half-second if (timer > 500) { timer = 0; if( $(this).scrollTop() < change1) { updateBarChart('valuem', 'opencomparison'); } else if ( $(this).scrollTop() > change1 && $(this).scrollTop() < change2) { updateBarChart('valuef', 'opencomparison'); } else if ($(this).scrollTop() > change2) { updateBarChart('valuem', 'remove'); } } }); var timer = 0; setInterval(function () { timer += 50; }, 50);