throttle

在开发中我们经常会遇见一些频繁触发的事件，比如resize、scroll、mousemove等。那如果这些事件是复杂的回调函数或是数据请求，连续的被触发之后，浏览器反应不过来，就会出现卡顿的现象，为了解决这个问题，就出现了两种解决方案：防抖（debounce）和 节流（throttle） 防抖（debounce） 原理：触发高频事件后n秒内，函数只会执行一次，如果在一个事件触发的n秒内再次触发这个事件，那会以新的触发时间重新计算。总之，就是在触发完事件的n秒内不再触发事件，才会再执行函数。 实现： function debounce(fn, wait) { var timer = null; return function () { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, wait); } } 若想立即执行并在n秒内取消 debounce 函数的做法（immediate参数判断是否是立刻执行） function debounce(fn, wait, immediate) { var timer, result; var debounced = function () { if (timer) clearTimeout(timer); if (immediate) {

drf的三大认证 </h1> <div class="clear"></div> <div class="postBody"> 目录 三大认证任务分析 auth组件的认证权限六表 自定义User表分析 源码分析 认证与权限工作原理 源码分析 认证模块工作原理 权限模块工作原理 admin关联自定义用户表 自定义认证、权限类 用户群查接口权限分析 自定义认证类 认证类的认证核心规则 自定义权限类 前后台分离登陆接口 三大认证任务分析 认证 模块:校验用户是是否登陆 self.perform_authentication(request) 权限 模块：校验用户是否拥有权限 self.check_permissionsn(request) 频率 模块：访问接口的次数在设定的时间范围内是否过快(配置访问频率、缓存计次、超次后需要等待的时间) self.check_throttles(request) auth组件的认证权限六表 也就是基于角色的访问控制：基于角色的访问控制（ RBAC ）是实施面向企业安全策略的一种有效的访问控制方式。 Django框架采用的是RBAC认证规则，RBAC认证规则通常会分为 三表规则、五表规则，Django采用的是六表规则 三表：用户表、角色表、权限表 五表：用户表、角色表、权限表、用户角色关系表、角色权限关系表 六表：用户表、角色表、权限表、用户角色关系表

问题的引出 　　在一些场景往往由于事件频繁被触发，因而频繁地进行DOM操作、资源加载，导致UI停顿甚至浏览器崩溃。 在这样的情况下，我们实际上的需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法。 1. resize事件 2. mousemove事件 3. touchmove事件 4. scroll事件 throttle 与 debounce 在现在很多的javascript框架中都提供了这两个函数。例如 jquery中有throttle和debounce插件， underscore.js ，Lodash.js 等都提供了这两个函数。 原理： 首先我们会想到设置一定的时间范围 delay ，每隔 delay ms 执行不超过一次。 事件处理函数什么时候执行能？ 这里有两个选择，一是先执行，再间隔 delay ms来等待；或者是先等待 delay ms，然后执行事件处理函数。 操作过程中的事件全不管，反正只执行一次事件处理。 相同低，这一次的事件处理可以是先执行一次，然后后面的事件都不管; 或者前面的都不管，最后操作完了再执行一次事件处理。 区别： 　　1. throttle 　　　　如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。 　　　

在《JavaScript高级程序设计》一书有介绍函数节流，里面封装了这样一个函数节流函数： function throttle(method, context) { clearTimeout(methor.tId); method.tId = setTimeout(function(){ method.call(context); }， 100); } 它把定时器ID存为函数的一个属性。而调用的时候就直接写 window.onresize = function(){ throttle(myFunc); } impress用的是另一个封装函数： var throttle = function(fn, delay){ var timer = null; return function(){ var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function(){ fn.apply(context, args); }, delay); }; }; 它使用闭包的方法形成一个私有的作用域来存放定时器变量timer。而调用方法为 window.onresize = throttle(myFunc, 100); 两种方法各有优劣，前一个封装函数的优势在把上下文变量当做函数参数

为什么要节流与防抖 在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。 什么是防抖 防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。 // 防抖 function debounce ( fn , wait ) { var timeout = null ; return function ( ) { timeout !== null ? clearTimeout ( timeout ) : "" ; timeout = setTimeout ( fn , wait ) ; } } // 处理函数 function handle ( ) { console . log ( Math . random ( ) ) ; } // 滚动事件 window . addEventListener ( 'scroll' , debounce ( handle ,

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重产品的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。 函数防抖 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。 一起来实现个简单的debounce~ 防抖debounce代码： // 防抖 function debounce ( fn , wait ) { var timeout = null ; return function ( ) { if ( timeout !== null ) clearTimeout ( timeout ) ; timeout = setTimeout ( fn , wait ) ; } } // 处理函数 function handle ( ) { console . log ( Math . random ( ) ) ; } // 滚动事件 window . addEventListener ( 'scroll

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。 函数防抖 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。 一起来实现个简单的debounce~ 防抖debounce代码： // 防抖 function debounce(fn, wait) { var timeout = null; return function() { if(timeout !== null) clearTimeout(timeout); timeout = setTimeout(fn, wait); } } // 处理函数 function handle() { console.log(Math.random()); } // 滚动事件 window.addEventListener('scroll', debounce(handle, 1000));

文章目录 1 函数防抖和节流 1.1 函数防抖 1.2 函数节流 1.2.1 定时器实现节流函数 1.2.1 时间戳实现节流函数 1.3 函数防抖与节流的比较 1.4 应用场景 1.4.1 函数防抖的应用场景 1.4.2 函数节流的应用场景 原文链接： 彻底弄懂函数防抖和函数节流 1 函数防抖和节流 函数防抖和节流 是优化 高频率 执行js代码的一种手段，js中的一些事件如浏览器的 resize、scroll ，鼠标的 mousemove、mouseover ，input输入框的 keypress 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。 1.1 函数防抖 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 //根据函数防抖思路设计出第一版的最简单的防抖代码： let timer ; // 维护同一个timer function debounce ( fn , delay ) { clearTimeout ( timer ) ; timer = setTimeout ( function ( ) { fn ( ) ; } , delay ) ; } // 用onmousemove测试一下防抖函数: function testDebounce ( ) { console .

防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法 缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟 //防抖debounce代码： function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { // 每当用户输入的时候把前一个 setTimeout clear 掉 clearTimeout(timeout); // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数 timeout = setTimeout(() => { fn.apply(this, arguments); }, 500); }; } // 处理函数 function handle() { console.log(Math.random()); } // 滚动事件 window.addEventListener('scroll', debounce(handle)); 节流 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率 实现方式：每次触发事件时，如果当前有等待执行的延时函数

函数防抖（debounce） ：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。 函数节流（throttle） ：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。 js代码 /** * @desc 函数防抖 * @param fn 函数 * @param delay 延迟执行毫秒数 默认0.5s */ export function debounce(fn, delay) { var delay = delay || 500; var timer; return function () { console.log('调用了debounce方法') let args = arguments; if(timer){ clearTimeout(timer); } timer = setTimeout(() => { timer = null; fn.apply(this, args); }, delay); } } /** * @desc 函数节流 * @param fn 函数 * @param interval 函数执行间隔时间毫秒数 默认1s */ export function throttle(fn, interval) { var last; var timer; var