草庐IT

关于js防抖和节流

晚饭总吃撑 2023-09-28 原文

之前项目中为了提高性能防止某个事件频繁触发，使用过节流和防抖，但是没有总结过，今天针对节流和防抖总结一下使用经验

你可以把节流理解成防抖的升级版，节流是在防抖的基础上限制代码的执行次数
防抖和节流的作用：都是为了避免一段代码高频率无意义的触发，减少浏览器或者服务器的负担
防抖和节流的区别：
防抖：防止代码多频次执行造成页面抖动，在一定时间内，代码多次触发会销毁之前的执行过程
节流：在一定时间内，代码一旦执行就不能再重复执行
防抖和节流的使用场景：
防抖：使用场景有很多，例如滚动页面加载页面内容，拖动div修改div的位置，拖动div修改div的大小等
节流：比如请求提交，点击按钮时如果频繁点击会造成多次相同的请求，没有意义而且对后台压力也很大，这时就需要节流，频繁点击无法多次触发事件，事件一旦执行无法再次执行
防抖和节流的实现原理：都是操作延时器，把运行代码放到延时器中，反复执行之前关闭之前的延时器，只不过节流在这基础上有添加了一旦代码执行就不能在执行前再次触发

防抖

function debounce(fn,delay){
    let timer = null
    return function(){
        clearTimeout(timer)
        timer = setTimeout(function(){
            fn.aplly(this,arguments)
        },delay)
    }
}

function test(){
    console.log("防抖")
}

window.addEventListener("scroll",debounce(test,500))

这段代码中使用了一个闭包，将timer封装到debounce函数内，返回的函数在执行前会销毁之前的延时器，阻止了之前的代码执行并设置重新执行

节流

function debounce(fn,delay){
    let isRuning = false
    return function(){
        if(isRuning) return;
        clearTimeout(timer)
        isRuning = true
        timer = setTimeout(function(){
            fn.aplly(this,arguments)
            isRuning = false
        },delay)
    }
}

function test(){
    console.log("节流")
}

window.addEventListener("scroll",debounce(test,500))

节流是在防抖的基础上又加了一个开关，作用是保证代码一旦执行了就不能再被触发
其实也可以像下面这样写

function debounce(fn,delay){
    let isRuning = false
    return function(){
        if(isRuning) return;
        isRuning = true
        fn.aplly(this,arguments)
        isRuning = false
    }
}

function test(){
    console.log("节流")
}

window.addEventListener("scroll",debounce(test,500))

这段代码也能起到节流的作用
注意：如果test函数是一个ajax请求，那么isRuning=false需要在ajax请求结束后关闭，那test可能就需要一个回调函数了，或者用promise的方式去做

最后，防抖和节流在实际开发中不经常用，但是一旦用到他对代码性能的提升还是很有意义的，有很多库也封装了防抖函数，比如lodash中的debounce方法，感兴趣的朋友可以到lodash官网去看文档,最重要的是记住防抖的作用是防止一段代码高频次无意义的执行，只要能够实现目的，过程采用什么形式就根据个人的喜好去实现就好了，没必要拘泥于上诉的方式

节流关于strongfunction

有关关于js防抖和节流的更多相关文章

  1. ruby-on-rails - 关于 Ruby 的一般问题 - 2

    我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件，但有一段代码我不完全理解，我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法，但我在插件的任何地方都找不到定义为常量的CLASS_METHODS，而且我也不确定是什么here，并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕，我将不胜感激。谢谢-C 最佳答案 这是一个异端。http://en.wikipedia

  2. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  3. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  4. ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？

  5. ruby - 关于 Ruby 中 Dir[] 和 File.join() 的混淆 - 2

    我在Ruby中遇到了一个关于Dir[]和File.join()的简单程序，blobs_dir='/path/to/dir'Dir[File.join(blobs_dir,"**","*")].eachdo|file|FileUtils.rm_rf(file)ifFile.symlink?(file)我有两个困惑:首先，File.join(@blobs_dir,"**","*")中的第二个和第三个参数是什么意思？其次，Dir[]在Ruby中有什么用？我只知道它等价于Dir.glob()，但是，我对Dir.glob()确实不是很清楚。 最佳答案

  6. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

  7. elasticsearch源码关于TransportSearchAction【阶段三】 - 2

    1.回顾.TransportServicepublicclassTransportServiceextendsAbstractLifecycleComponentTransportService：方法：1publicfinalTextendsTransportResponse>voidsendRequest(finalTransport.Connectionconnection,finalStringaction,finalTransportRequestrequest,finalTransportRequestOptionsoptions,TransportResponseHandlerT>

  8. 关于Qt程序打包后运行库依赖的常见问题分析及解决方法 - 2

    目录一.大致如下常见问题：（1）找不到程序所依赖的Qt库version`Qt_5'notfound(requiredby（2）CouldnotLoadtheQtplatformplugin"xcb"in""eventhoughitwasfound（3）打包到在不同的linux系统下，或者打包到高版本的相同系统下，运行程序时，直接提示段错误即segmentationfault，或者Illegalinstruction(coredumped)非法指令（4）ldd应用程序或者库，查看运行所依赖的库时，直接报段错误二.问题逐个分析，得出解决方法：（1）找不到程序所依赖的Qt库version`Qt_5'

  9. node.js - 从未编写过任何自动化测试，我应该如何开始行为驱动开发？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。多年来，我一直在使用多种语言进行编程，并且认为自己总体上相当擅长。但是，我从未编写过任何自动化测试:没有单元测试，没有TDD，没有BDD，什么都没有。我已经尝试开始为我的项目编写适当的测试套件。我可以看到在进行任何更改后能够自动测试项目中所有代码的理论值(value)。我可以看到像RSpec和Mocha这样的测试框架应该如何使设置和运行所述测试变得相当容易

  10. ruby-on-rails - 将 Angular JS 与 Rails 集成 - 2

    我需要一些指导来了解如何将Angular整合到rails中。选择Rails的原因:我喜欢他们偏执的做事方式。还有迁移，gem真的很酷。使用angular的原因:我正在研究和寻找最适合SPA的框架。Backbone似乎太抽象了。我不得不在Angular和Ember之间做出选择。我首先开始阅读Angular，它对我来说很有意义。所以我从来没有去读过关于ember的文章。使用Angular和Rails的原因:我研究并尝试使用小型框架，例如grape、slim(是的，我也使用php)。但我觉得需要坚持项目的长期范围。我个人喜欢用Rails的方式做事。这就是我需要帮助的地方，我在Rails4中有

随机推荐