码迷,mamicode.com
首页 > Web开发 > 详细

js函数节流(解决频繁触发函数的性能问题)

时间:2017-05-09 14:59:07      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:调用   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 没事可以看看,欢迎留言!!

js函数节流(解决频繁触发函数的性能问题)

标签:调用   distance   current   log   art   mouse   blog   ext   span   

原文地址:http://www.cnblogs.com/wanyifeng/p/6830318.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!