解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题


Posted in Javascript onApril 21, 2020

说明

之前有一个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));

对频繁的操作(如dragover)不去触发变更检测。使用NgZone中的runOutsideAngular方法,angular不会对里面的变化进行跟踪。

ps:下面看下Angular 元素拖拽

  1. 拖动元素到指定区域
  2. 拖放的同时传递数据

1. 安装 ng2-drag-drop

npm install ng2-drag-drop --save

2. 模板中配置可拖拽元素

// drag.component.html
 <div>
  <a href="javascript:;" rel="external nofollow" *ngFor="let item of sysData" draggable [dragData]="item" [dragScope]="'system'">{{ item.name }}</a>
 </div>
  • draggable - 表明此元素时可拖拽的
  • [dragData] = 'item' - 在拖动过程中将item数据从draggable到droppable
  • [dragScope]="'system'" - 拖拽范围,和第三步[dropScope]="'system'"相对应;

3. 模板中配置拖拽元素所拖拽的目的地

// drag.component.ts
 <div droppable (onDrop)="onItemDrop($event)" [dropScope]="'system'"></div>
  • droppable - 第二步中拖拽的元素都将拖拽到有droppable指令的元素内;
  • (onDrop) - 当拖拽元素至此区域内后(鼠标释放后),触发onItemDrop方法,其中$event就是第二步中[dragData] = 'item'的item参数
  • [dropScope]="'system'" - 和第二步的[dragScope]="'system'"对应,[dragScope]="'system'"的拖拽元素只能拖拽到 [dropScope]="'system'"元素内;

4. ts文件

// drag.component.ts
export class DragComponent {

 const sysData = [
  {id: '1', name: '拖动元素1'},
  {id: '2', name: '拖动元素2'},
  {id: '3', name: '拖动元素3'},
  {id: '4', name: '拖动元素4'}
 ];

}

onItemDrop(e: any) {
 // data为拖拽时传递的数据 - item
 const data = e.dragData;
}

总结

到此这篇关于angular 中使用原生拖拽页面卡顿,表单控件输入延迟的文章就介绍到这了,更多相关angular 中使用原生拖拽页面卡顿,表单控件输入延迟内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
深入理解angularjs过滤器
May 25 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
详解wow.js中各种特效对应的类名
Sep 13 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 #Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 #Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 #Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 #Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 #Javascript
vue实现购物车功能(商品分类)
Apr 20 #Javascript
vue实现淘宝购物车功能
Apr 20 #Javascript
You might like
joomla内置的表单验证功能使用方法
2010/06/11 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Python中的类与类型示例详解
2019/07/10 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
python实现发送邮件
2021/03/02 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
网络安全类面试题
2015/08/01 面试题
Linux文件操作命令都有哪些
2015/02/27 面试题
员工培训心得体会
2013/12/30 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
Python的三个重要函数详解
2022/01/18 Python
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技