js函數節流(解決頻繁觸發函數的性能問題)

​ 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 沒事可以看看,歡迎留言!!