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

Posted 2020-09-17

? 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 没事可以看看,欢迎留言!!