Maison >interface Web >js tutoriel >Explication détaillée de l'utilisation des fonctions JavaScript de base anti-rebond, sondage et instances uniques
anti-rebond
Pour les événements à forte consommation d'énergie, la fonction anti-rebond est une bonne solution. Si vous n'utilisez pas la fonction anti-rebond pour les événements de défilement, de redimensionnement et de touche*, vous faites presque une erreur. La fonction anti-rebond suivante peut maintenir l'efficacité de votre code :
// 返回一个函数,如果它被不间断地调用,它将不会得到执行。该函数在停止调用 N 毫秒后,再次调用它才会得到执行。如果有传递 ‘immediate' 参数,会马上将函数安排到执行队列中,而不会延迟。 function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; // 用法 var myEfficientFn = debounce(function() { // 所有繁重的操作 }, 250); window.addEventListener('resize', myEfficientFn);
La fonction anti-rebond ne permet pas à la fonction de rappel d'être exécutée plus d'une fois dans un délai spécifié. Cette fonction est particulièrement importante lors de l'attribution d'une fonction de rappel à un événement qui sera déclenché fréquemment.
sondage
Bien que la fonction anti-rebond soit mentionnée ci-dessus, vous ne pouvez pas insérer un événement pour déterminer l'état requis si l'événement n'existe pas. pour vérifier de temps en temps si le statut répond à vos exigences.
function poll(fn, callback, errback, timeout, interval) { var endTime = Number(new Date()) + (timeout || 2000); interval = interval || 100; (function p() { // 如果条件满足,则执行! if(fn()) { callback(); } // 如果条件不满足,但并未超时,再来一次 else if (Number(new Date()) < endTime) { setTimeout(p, interval); } // 不匹配且时间消耗过长,则拒绝! else { errback(new Error('timed out for ' + fn + ': ' + arguments)); } })(); } // 用法:确保元素可见 poll( function() { return document.getElementById('lightbox').offsetWidth > 0; }, function() { // 执行,成功的回调函数 }, function() { // 错误,失败的回调函数 } );
Le sondage est utilisé sur le web depuis longtemps et le sera encore à l'avenir.
une fois
Parfois, vous souhaitez qu'une fonction donnée ne se produise qu'une seule fois, similaire à l'événement onload. Le code suivant fournit la fonctionnalité dont vous parlez :
function once(fn, context) { var result; return function() { if(fn) { result = fn.apply(context || this, arguments); fn = null; } return result; }; } // 用法 var canOnlyFireOnce = once(function() { console.log('Fired!'); }); canOnlyFireOnce(); // "Fired!" canOnlyFireOnce(); // nada // 没有执行指定函数
once function garantit qu'une fonction donnée ne peut être appelée qu'une seule fois, évitant ainsi une initialisation répétée !
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!