什么是去抖动方法以及如何在JavaScript中使用它

本文概述

• 1)调整大小事件
• 2)按键事件

在前端区域进行Web开发期间, 我们将被迫提高功能的性能, 但是有时以某种方式, 有些功能由于已经完成任务而无法修改或无法进一步优化。

但是, 但是我们可以防止它在每毫秒内执行一次, 并强制它每X毫秒仅执行一次, 并执行一次任务。防反跳函数在调用时不会执行, 它们会在可配置的持续时间内等待调用暂停, 然后再执行, 每次新的调用都会重新启动计时器。

为此, 我们将使用反跳功能, 这将有助于我们完成任务, 具体如下：

/**
* Execute a function given a delay time
* 
* @param {type} func
* @param {type} wait
* @param {type} immediate
* @returns {Function}
*/
var debounce = function (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);
     };
};

在大多数情况下, 根据用途, 此功能将大大提高性能, 例如：

1)调整大小事件

如果每次窗口调整大小时都需要用JavaScript调整许多元素的大小, 这将意味着大量的递归消耗。使用去抖将使调整大小事件仅根据窗口的调整大小运动被触发1次。

$(window).resize(debounce(function(){
    // the following function will be executed every half second
    executeMyReallyHeavyTask();
}, 500)); // Milliseconds in which the task should be executed (500 = half second)

2)按键事件

如果你自己进行自动完成, 则需要防止每次按下按钮都执行对服务器的调用。使用debounce将使在新闻事件中仅执行1个Ajax调用。

$('#myInput').keyup(debounce(function(){
     // the following function will be executed every half second
     makeAjaxCall();
}, 500)); // Milliseconds in which the ajax call should be executed (500 = half second)

防反跳将以一种简短而优雅的方式提高你的持久执行功能的性能。