关于性能优化的那点事——函数防抖

Stardustsky 发布于2019-08-21 14:21 / 935人阅读

摘要：函数防抖场景假设网站有个搜索框用户输入文本我们会自动联想匹配出一些结果供用户选择我们可能首先想到的做法就是监听事件然后异步查询结果但是如果用户快速的输入了一串字符假设是个字符那么就会在瞬间触发次请求这无疑不是我们想要的我们想要的是用户停止输

函数防抖 场景

假设网站有个搜索框, 用户输入文本我们会自动联想匹配出一些结果供用户选择,我们可能首先想到的做法就是监听keypress事件, 然后异步查询结果. 但是如果用户快速的输入了一串字符, 假设是10个字符, 那么就会在瞬间触发10次请求, 这无疑不是我们想要的, 我们想要的是用户停止输入的时候才去触发查询的请求.

原理

函数防抖就是让某个函数在上一次执行后, 满足等待某个时间内不再触发此函数后再执行, 而在这个等待时间内再次触发此函数, 等待时间会重新计算.

实现

underscore.js的函数防抖定义: _.debounce(fn, wait, [immediate]);

debounce接收三个参数:
@params fn: 需要进行函数防抖的函数;
@params wait: 需要等待的时间, 单位为毫秒;
@params immediate: 如果为true, 则debounce会在调用时立刻执行一次fn,
                   而不需要等到wait结束后.

_.debounce = function(fn, wait, immediate) {
    var timeout,
        args,
        context,
        timestamp,
        result;

    var later = function() {
        var last = _.now() - timestamp;

        if(last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if(!immediate) {
                result = fn.apply(context, args);

                if(!timeout) {
                    context = args = null;
                }
            }
        }
    };

    return function() {
        context = this;
        args = arguments;
        timestamp = _.now();
        var callNow = immediate && !timeout;

        if(!timeout) {
            timeout = setTimeout(later, wait);
        }

        if(callNow) {
            result = fn.apply(context, args);
            context = args = null;
        }

        return result;
    }
};

// demo:
$("#input").keypress(_.debounce(function() {
    //异步调用查询
}, 300));

云服务器 idc机房托管关于服务器的优化函数优化性能优化关于c语言函数返回值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87891.html

关于性能优化的那点事——函数节流

摘要：函数节流背景中的函数大多数情况下都是由用户主动调用触发的除非是函数本身的实现不合理否则一般不会遇到跟性能相关的问题但在少数情况下函数的触发不是由用户直接控制的在这些场景下函数可能被非常频繁调用而造成大的性能问题场景事件事件滚动事件共同的特征函数节流背景 javascript中的函数大多数情况下都是由用户主动调用触发的, 除非是函数本身的实现不合理, 否则一般不会遇到跟性能相关的问题...

khlbat 2019-08-20 10:31 评论0 收藏0
关于性能优化的那点事——BigRender首屏渲染优化

摘要：首屏渲染优化背景一个庞大的页面有时我们并不会滚动去看下面的内容这样就造成了非首屏部分的渲染这些无用的渲染不仅包括图片还包括其他元素甚至一些某些根据模块请求比如理论上每增加一个都会增加渲染的时间并且影响着页面打开的加载速度这时就需要一种办法使 BigRender首屏渲染优化背景一个庞大的页面, 有时我们并不会滚动去看下面的内容, 这样就造成了非首屏部分的渲染, 这些无用的渲染不仅包括...

Markxu 2019-08-20 10:35 评论0 收藏0
关于localStorage面试的那点事

摘要：已经超出本地存储限定大小可进行超出限定大小之后的操作，如下面可以先清除记录，再次保存面试官一波素质三连对于只是会使用的同学来说，肯定是不得其解的。最近面试的时候关于html5API总会被问到localStorage的问题，对于一般的问题很简单，无非就是 localStorage、sessionStorage和cookie这三个客户端缓存的区别 localStorage的API，g...

timger 2019-08-01 17:57 评论0 收藏0
关于var，let，const的那点事

摘要：一直使用定义变量，的出现给变量定义增加了两个大将，。声明的变量，块作用域，不重复声明覆盖，限制了变量的作用域，保证变量不会去污染全局变量，所以尽量将改为用。一直使用var定义变量，ES6的出现给变量定义增加了两个大将let，const。那它们有什么区别呢。 1、const关键字它的作用就是定义一个常量,一旦定义无法更改，不能重复声明覆盖； showImg(https://segmen...

KavenFan 2019-08-20 14:26 评论0 收藏0
写技术博客那点事

摘要：从现在开始，养成写技术博客的习惯，或许可以在你的职业生涯发挥着不可忽略的作用。如果想了解更多优秀的前端资料，建议收藏下前端英文网站汇总这个网站，收录了国外一些优质的博客及其视频资料。前言写文章是一个短期收益少，长期收益很大的一件事情，人们总是高估短期收益，低估长期收益。往往是很多人坚持不下来，特别是写文章的初期，刚写完文章没有人阅读会有一种挫败感，影响了后期创作。从某种意义上说，...

ddongjian0000 2019-08-23 15:12 评论0 收藏0