免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

angular使用原生拖拽頁面卡頓及表單控件輸入延遲怎么辦-創新互聯

這篇文章主要為大家展示了angular使用原生拖拽頁面卡頓及表單控件輸入延遲怎么辦,內容簡而易懂,希望大家可以學習一下,學習完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。

成都創新互聯公司基于分布式IDC數據中心構建的平臺為眾多戶提供成都電信服務器托管 四川大帶寬租用 成都機柜租用 成都服務器租用。

說明

之前有一個angular項目,頁面上表單不算多,也就一百來個(這個不固定,有的地方多,有的地方少),但是再輸入的時候會造成輸入延遲,反應不靈敏,對用戶體驗極其不好。還有一個功能就是拖拽功能(原生,沒有使用官方中的拖拽功能),從左邊拖到右邊區域,拖拽區域少的時候還挺流暢,但一旦有幾百上千的時候反應極其的慢

原因(?)

上面兩個問題其實都和angular的機制有關。一個雙向綁定一個拖拽歸根結底都是因為angular的變化檢測

angular的雙向綁定主要是臟數據檢查,如果大量的檢查,效率比較低。(雙向綁定時向zone掛載一個異步函數,對數據改變是做處理,及時將變化反饋顯示在頁面上)可能就會輸入延遲

拖拽(也是向zone掛載異步函數)則是因為angular對每個可移動像素的元素進行檢測而且還可能涉及對dom的操作,當拖拽區域數量較為多時,綁定的函數就越多,angular需要檢測的元素區域就越來越多,處理起來就越力不從心(即使元素隱藏也不代表不會進行變化檢測)

解決

  1. 對于雙向綁定造成的輸入延遲,停止使用雙向綁定,改用單向綁定
  2. 拖拽過程angular一直檢測頁面變化,所以頁面卡頓。我們需要做的就是設置對某些操作不跟蹤變化
this.ngZone.runOutsideAngular(() => {
  this.dragEnter = this.rd.listen(spanDom, 'dragenter', this.dragenterHandler.bind(this));
  this.dragOver = this.rd.listen(spanDom, 'dragover', (e) => {
   e.preventDefault();
  });
 this.dragLeave = this.rd.listen(spanDom, 'dragleave', this.dragLeaveHandle.bind(this));
});
this.dragDrop = this.rd.listen(spanDom, 'drop', this.dropHandler.bind(this));

本文題目:angular使用原生拖拽頁面卡頓及表單控件輸入延遲怎么辦-創新互聯
URL分享:http://m.newbst.com/article36/dpeosg.html

成都網站建設公司_創新互聯,為您提供微信公眾號商城網站品牌網站設計搜索引擎優化關鍵詞優化電子商務

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

手機網站建設