JS中的函數大多數情況下都是由用戶主動調用觸發的,但在一些少數情況下,函數的觸發不是由用戶直接控制的。在這些場景下,函數有可能被非常頻繁地調用,而造成大的性能問題。 函數被頻繁調用的場景 鍵盤事件: 參考百度的搜索框沒輸入一個字母就發送一次Ajax請求開銷很大 通過下麵的函數可以實現性能的優化, ...
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 沒事可以看看,歡迎留言!!