标签：调用 distance current log art mouse blog ext span
? JS中的函数大多数情况下都是由用户主动调用触发的,但在一些少数情况下，函数的触发不是由用户直接控制的。在这些场景下，函数有可能被非常频繁地调用，而造成大的性能问题。
函数被频繁调用的场景
键盘事件:
参考百度的搜索框没输入一个字母就发送一次Ajax请求开销很大 通过下面的函数可以实现性能的优化,每过500ms 触发一次事件
var isClick; $( ‘text‘ ).on( ‘keydown‘, function () { clearTimeout( isClick ); isClick = setTimeout(function () { //发送Ajax请求 $.ajax({ url: ‘...‘ ... }); }, 500 ); }); //上面所有的使用场景都适用
鼠标移动触发事件
var range = 10*10;//定义返回10px 小面 三角函数未开方 所有这里需要*10 var currentPoint; function distance( p1, p2 ) { return Math.abs( Math.pow (p1.x - p2.x, 2 ) - Math.pow (p1.y - p2.y, 2 ) ); } $( ‘#div‘ ).on( ‘mousemove‘, function ( e ) { if ( !currentPoint ) { currentPoint = { x:e.offsetX, y:e.offsetY }; }; if ( distance( currentPoint, e.PONIT ) < range ) return; // 正常执行的代码 currentPoint = {}; });
总结 : 函数节流就是为了解决函数的触发频率过高的问题
另外附上我个人域名 www.wanyifeng.top 没事可以看看,欢迎留言!!
标签：调用 distance current log art mouse blog ext span
原文地址：http://www.cnblogs.com/wanyifeng/p/6830318.html
