js 节流函数
比如我给一个文本框绑定了click和focus事件,并且这两个事件的处理函数完全相同.
那么通过鼠标点击聚焦的时候,就会执行两次,实例如下:
var updateIndex=function (event) { console.log('updateIndex'); }; var bindEvent=function ($textarea) { $textarea.click(function (event) { updateIndex(); }).focus(function (event) { updateIndex(); }); }; $(function (event) { $('#servletAction2').focus(); bindEvent($('textarea')); });
使用节流函数可以解决这个问题:
var updateIndex=function (event) { console.log('updateIndex'); }; var updateIndexThrottle=throttle3(updateIndex,200); // var updateIndexThrottle=updateIndex; var bindEvent=function ($textarea) { $textarea.click(function (event) { updateIndexThrottle(); }).focus(function (event) { updateIndexThrottle(); }); }; $(function (event) { $('#servletAction2').focus(); bindEvent($('textarea')); });
节流函数源码:
/*** * 需要注意:分支二走完之后,需要清空t_start 吗?<br> * 如果不清空,会有这种清空:执行完分支二之后,马上执行分支一<br> * e.g:var func3=throttle3(myFunc,2000,2100);<br> * 需要保证:(1)连续频繁地点击,则每隔runDelay 秒,必须执行一次;<br> * (2)随意的乱点击,一定会执行至少一次<br> * 定时器执行时,需要重置t_start,否则执行完分支二之后,马上执行分支一<br> * @param fn * @param delay * @param runDelay * @returns {Function} */ function throttle3(fn, delay, runDelay, scope) { var timer = null; var t_start; return function () { //没有传递参数runDelay,但是传递scope if (runDelay && (typeof runDelay != 'number') && (!scope)) { scope = runDelay; } var context = scope || this, args = arguments, t_cur = new Date(); // console.log(context); timer && clearTimeout(timer); if (!t_start) { t_start = t_cur; } // console.log('t_start:'+t_start); // console.log('t_cur:'+t_cur); // console.log('t_cur - t_start:'+(t_cur - t_start)); //runDelay的类型等于'undefined',表示没有传递参数runDelay if ((typeof runDelay != 'undefined') && (t_cur - t_start >= runDelay)) { fn.apply(context, args);//分支一 t_start = t_cur; // console.log('一:' + new Date()); } else { timer = setTimeout(function () {//分支二 fn.apply(context, args); // console.log('二:' + new Date()); t_start = new Date(); }, delay); } } }
参考:http://hw1287789687.iteye.com/blog/2312189
相关推荐
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在《JavaScript高级程序设计》一书中有这样的一个例子: function throttle (method, ...
函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟、假死或卡顿的现象。
防抖(debounce)和节流(throttle)是常用的两个 JavaScript 函数优化技术,它们可以帮助我们避免在高频率事件触发时导致的性能问题。 防抖和节流的主要区别在于它们处理事件触发的方式不同。防抖在事件触发后等待...
js代码-节流函数的实现
js代码-手写节流函数
js代码-节流函数实现
主要介绍了js防抖函数和节流函数使用场景和实现区别,结合实例形式详细分析了js防抖函数和节流函数基本功能、定义、用法区别及操作注意事项,需要的朋友可以参考下
JavaScript函数节流和函数防抖之间的区别.docx
js常用函数封装,cookie、dom操作、自适应浏览器前缀、函数节流等
函数节流案例
js 函数节流,里面大概介绍了javascript函数节流的知识,并一实例配置之
vue使用节流函数的踩坑实例指南 一个常见的业务场景,我们要在input搜索框输入结束后,发送相关请求,获取搜索数据。频繁的事件触发会导致接口请求过于频繁。所以需要我们对此加以限制,来禁止不必要的请求,以免...
主要为大家详细介绍了JavaScript 节流函数 Throttle,感兴趣的小伙伴们可以参考一下
函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片。由于肉眼只能分辨出一定频率的变化,当高频率的扫描,...
主要介绍了JS函数节流和函数防抖问题分析,非常不错,具有参考借鉴价值,需要的朋友可以参考下
然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法,就是函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数。 /utils/util.js: function ...
在写JS时,这两个函数比较常见,有时候傻傻分不清用哪个,或者说知道代码要怎么写,但要说出它究竟是节流函数还是防抖函数时一脸楞逼。今天有一个同学分享了这两个的区分,我也来回顾一下,加深一下印象,以便日后...