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

標籤：調用   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 小面 三角函數未開方 所有這裡需要*10var 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函數節流(解決頻繁觸發函數的效能問題)