什么是去抖动方法以及如何在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 secondexecuteMyReallyHeavyTask(); }, 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 secondmakeAjaxCall(); }, 500)); // Milliseconds in which the ajax call should be executed (500 = half second)

【什么是去抖动方法以及如何在JavaScript中使用它】防反跳将以一种简短而优雅的方式提高你的持久执行功能的性能。