throttle | 易学教程

咦？浏览器又崩了？再试试这个呢！

阅读更多关于咦？浏览器又崩了？再试试这个呢！

由于连续进行过多的dom操作，有时候会导致浏览器运行崩溃，尤其是在ie中使用onrise事件处理的程序中有dom操作，高频的修改可能会导致浏览器崩溃，为了绕开这个问题，可以用定时器对函数进行节流。当别人问你，同学说一下函数节流吧？你可以告诉他，某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码，当第二次调用该函数时，他会清除第一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。 let processor = { timeoutId:null, //实际进行处理的方法 performPrcessing:function() { //实际执行的代码 }， //初始处理调用的方法 process:function() { clearTimeout(this.timeoutId); let that = this; this.timeoutId = setTimeout(function() { that.performPrcessing(); },100) } } 在这里创建一个processor对象，对象还有两个方法process和performProcessing()

DRF权限和频率

阅读更多关于 DRF权限和频率

DRF权限 : 权限是什么 : 　　对某件事情决策的范围和程度, 就叫权限, 权限在项目开发中是非常重要的. 　　看下DRF框架给我们提供的权限组件都有哪些方法. 权限组件源码 : 　　通过DRF的版本和认证, 也知道全下和频率都是在niitial方法里初始化的. 　　其实版本, 认证, 权限, 频率控制走的源码流程大致相同, 也是可以在源码中看到　　权限类中一定要有has_permission方法, 否则会抛出异常, 这也是框架给我提供的钩子 , 　　我们看到在rest_framework.permission这个文件中, 存放了框架给我们提供的所有权限的方法. 　　其中BasePwemission是写权限类继承的一个基础权限类. 权限的详细用法举例 : 　　我们要搞清楚一点, 我们python代码是一行一行的执行的, name执行initial方法初始化这些组件的时候, 也是有顺序的, 我们的版本在前面, 然后是认证, 然后是权限, 最后是频率. 　　在权限执行的时候, 我们认证已经执行结束了　　前提在model中的UserInfo表中加了一个字段, 用户类型的字段, 做好数据迁移. class MyPermission(BasePermission): message = "VIP用户才能访问" def has_permission(self, request,

前端面试题库——什么是防抖和节流？有什么区别？如何实现？

阅读更多关于前端面试题库——什么是防抖和节流？有什么区别？如何实现？

什么是防抖与节流？防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。区别函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。实现防抖的实现 // 防抖 function debounce ( fn , wait ) { var timeout = null ; return function ( ) { if ( timeout !== null ) clearTimeout ( timeout ) ; timeout = setTimeout ( fn , wait ) ; } } // 处理函数 function handle ( ) { console .

rxjs6 Filtering Operators

阅读更多关于 rxjs6 Filtering Operators

debounce / debounceTime 防抖, 一直输入的情况下, 只有输入间隔大于200ms时发送数据, 减少无用请求数 change$.pipe( debounce(() => interval(200)) ).subscribe(console.log) change$.pipe( debounceTime(200) ).subscribe(console.log) distinct 去重, 可以传入一个 keySelector 的函数 // 1,2,3 of(1, 2, 1, 2, 3).pipe( distinct() ).subscribe(console.log) // { name: 'a' } { name: 'b' } of( {name: 'a',}, {name: 'b'}, {name: 'a'} ).pipe( distinct(v => v.name) ).subscribe(console.log) distinctUntilChanged 完整的去重需要维护一个set, 为了节省内存, 可以只和上一个比较, 常用于已经排序的情况 of( {age: 4, name: 'Foo'}, {age: 7, name: 'Bar'}, {age: 5, name: 'Foo'}, {age: 6, name: 'Foo'}, ).pipe(

前端js脚本与防止js脚本

阅读更多关于前端js脚本与防止js脚本

前言身为一名前端开发工程师，有时候业务场景是无法用手速模拟的，老司机也有翻车的时候【你懂得】。因此我特意写这一篇文章，希望能够对大家有所帮助。涉及到的内容： 1.chrome浏览器 2.js代码 3.函数节流第一步打开chrome浏览器，使用组合键Ctrl+shift+i打开开发者工具，接下来如图所示。点击snippets 第二步如图所示点击new snippet -->输入脚本‘名称’-->Ctrl+s保存。第三步如图所示选择新创建的脚本‘名称’，在如图所示的第二步进行编辑js代码。最后如第三步所示：run 运行代码。 js脚本代码 1.以下是网站上的代码： <body> <div class="box"> <img class="img" src="image/pict.png" /> <button class="btn" id='btn'>抢购</button> </div> <script type="text/javascript"> /** * 抢购按钮 * * */ btn.onclick=function(){ console.log('抢购成功！'); }; </script> </body> 每次点击抢购控制台输出抢购成功！ 2.脚本代码 /** * 最简单的脚本代码 * 版本1.0.1 */ btn.click();/

频率（限流）

阅读更多关于频率（限流）

问题：控制访问频率，在访问的时候加上一定的次数限制基本实现 views.py class VisitThrottle(object): def allow_request(self, request, view): return True # 可以继续访问 # return False # 访问频率太高, 被限制 def wait(self): pass 可以进一步的升级，限制 10s 内只能访问3次 import time VISIT_RECORD = {} class VisitThrottle(object): ''' 10s内只能访问3次 ''' def allow_request(self, request, view): # 1. 获取用户IP remote_addr = request.META.get('REMOTE_ADDR') ctime = time.time() if remote_addr not in VISIT_RECORD: VISIT_RECORD[remote_addr] = [ctime, ] return True history = VISIT_RECORD.get(remote_addr) while history and history[-1] < ctime - 10: history.pop() if len(history)

函数节流

阅读更多关于函数节流

参考《JavaScript高级程序设计》第三版第22章高级技巧浏览器中某些计算和处理比其他的昂贵的多。例如， DOM操作比起非DOM交互需要更多的内存和CPU时间。连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至崩溃。尤其IE中使用onresize事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。为了绕开这个问题，可以使用定时器对该函数进行节流。函数节流背后的基本思想是指，某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，会清除前一次的定时器并设置另一个。目的是只有在执行函数的请求停止了一段时间后才执行。 function throttle(method, context) { clearTimeout(method.tId); method.tId = setTimeout(function() { method.call(context); }, method.interval || 200); } throttle函数接受两个参数，要执行的函数及作用域，如果没有第二个参数，将会在全局作用域执行。 onresize举例： function handleResize() { // do someting } window

试议常用Javascript 类库中 throttle 与 debounce 辅助函数的区别

阅读更多关于试议常用Javascript 类库中 throttle 与 debounce 辅助函数的区别

问题的引出看过我前面两篇博客的童鞋可能会注意到都谈到了事件处理的优化问题。在很多应用中，我们需要控制函数执行的频率，例如窗口的 resize，窗口的 scroll 等操作，事件触发的频率非常高，如果处理函数比较复杂，需要较多的计算时间，那么会加重浏览器的负担，这时我们很自然会想到：能否在不影响显示效果（对显示效果影响在可接受范围内）的前提下减少事件响应函数的执行频率呢？朴素的解决思路首先我们会想到设置一定的时间范围 delay ，每隔 delay ms 执行不超过一次。事件处理函数什么时候执行能？这里有两个选择，一是先执行，再间隔 delay ms来等待；或者是先等待 delay ms，然后执行事件处理函数。操作过程中的事件全不管，反正只执行一次事件处理。相同低，这一次的事件处理可以是先执行一次，然后后面的事件都不管; 或者前面的都不管，最后操作完了再执行一次事件处理。当然上面是简单的通俗描述。 throttle 与 debounce 函数现状 throttle与debounce即是对上面两种思路的具体实现。在现在很多的javascript框架中都提供了这两个函数。例如 jquery中有throttle和debounce插件， underscore.js ，Lo-dash.js 等都提供了这两个函数。释义 throttle 在英文中是节流阀的意思，顾名思义

函数节流(throttle)和防抖(debounce)

阅读更多关于函数节流(throttle)和防抖(debounce)

一、节流和防抖我们知道过于频繁的dom操作会导致页面卡顿甚至浏览器崩溃，节流和防抖可以用于缓解在某段时间内频繁调用函数带来的压力。节流：在某段时间内，只允许函数执行一次，随后进入下一个执行周期防抖：在连续的操作之后过一段时间才会执行一次函数二、函数实现 1、防抖debounce 1 function debounce(fun, delay){ 2 let timer; 3 return function(){ 4 let context = this; 5 let args = arguments; 6 clearTimeout(timer); 7 timer = setTimeout (()=>{ 8 fun.apply(context,args); 9 },delay) 10 } 11 } 2、节流throttle 1 function throttle(fun, delay, mustRunDelay){ 2 let timer = null 3 let start 4 return function(){ 5 let context = this 6 let args = arguments 7 let now = new Date().getTime() 8 clearTimeout(timer) 9 if(!start){ 10 start = now;

Redis-Cell 漏斗限流的使用

阅读更多关于 Redis-Cell 漏斗限流的使用

（1）下载安装包 https://github.com/brandur/redis-cell/releases （2）解压到某个目录（3）进入 redis-cli，执行命令module load /aaa/bbb/libredis_cell.so 这是临时的办法，重启redis就没了（4）想永久的，需要这样 $ redis-server --loadmodule /aaa/bbb/libredis_cell.so 加到启动命令里。（5）进入 redis-cli，执行命令，可以看看是否生效。 127.0.0.1:6379> command info CL.THROTTLE 1) 1) "cl.throttle" 2) (integer) -1 3) 1) write 4) (integer) 1 5) (integer) 1 6) (integer) 1 127.0.0.1:6379> MODULE LIST 1) 1) "name" 2) "redis-cell" 3) "ver" 4) (integer) 1 （6）然后不停的执行类似这样的命令就行了： CL.THROTTLE test 10 5 60 1 初始是10个令牌，每60秒允许5个。多执行几次，就返回1拒绝了。 127.0.0.1:6379> CL.THROTTLE test 10 5 60 1 1)

订阅 throttle