硬件断点反跳似乎

    技术2022-07-11  140

    硬件断点反跳似乎

    One of the biggest mistakes I see when looking to optimize existing code is the absence of the debounce function.  If your web app uses JavaScript to accomplish taxing tasks, a debounce function is essential to ensuring a given task doesn't fire so often that it bricks browser performance.

    在寻求优化现有代码时,我看到的最大错误之一是缺少反跳功能。 如果您的Web应用程序使用JavaScript来完成征税任务,那么反跳功能对于确保给定任务不会频繁触发以至于削弱浏览器性能至关重要。

    For those of you who don't know what a debounce function does, it limits the rate at which a function can fire. A quick example:  you have a resize listener on the window which does some element dimension calculations and (possibly)  repositions a few elements.  That isn't a heavy task in itself but being repeatedly fired after numerous resizes will really slow your site down.  Why not limit the rate at which the function can fire?

    对于不了解反跳功能功能的人来说,它会限制该功能的触发速率。 一个简单的例子:您在窗口上有一个调整大小的侦听器,该侦听器执行一些元素尺寸计算并(可能)重新放置一些元素。 这本身并不是一项繁重的任务,但是在无数次调整大小后反复被触发实际上会使您的网站变慢。 为什么不限制该功能的启动速度?

    Here's the basic JavaScript debounce function (as taken from Underscore.js):

    这是基本JavaScript反跳功能( 取自Underscore.js ):

    // Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing. 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); }; };

    You'll pass the debounce function the function to execute and the fire rate limit in milliseconds.  Here's an example usage:

    您将通过debounce函数传递要执行的函数以及发射速率限制(以毫秒为单位)。 这是一个示例用法:

    var myEfficientFn = debounce(function() { // All the taxing stuff you do }, 250); window.addEventListener('resize', myEfficientFn);

    The function above will only fire once every quarter of a second instead of as quickly as it's triggered; an incredible performance boost in some cases.

    上面的函数仅每四分之一秒触发一次,而不是像触发时一样快。 在某些情况下,性能得到了惊人的提升。

    I'm often asked what rate should be used when debouncing, and it's an impossible question to answer because it depends on the task.  The best way to know is testing different rates yourself and seeing where you notice a slowdown -- if you notice it, so will your users!

    我经常被问到反跳时应该使用什么速率,这是一个不可能回答的问题,因为它取决于任务。 最好的了解方法是自己测试不同的费率,并查看您注意到减速的地方-如果您注意到它,那么您的用户也会如此!

    翻译自: https://davidwalsh.name/javascript-debounce-function

    硬件断点反跳似乎

    相关资源:凌特按钮开/关控制器具备防反跳与电源启动功能
    Processed: 0.015, SQL: 9