解决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 防止刷新,后退,关闭
Aug 07 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
Vue实现简单的跑马灯
May 25 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
php启用zlib压缩文件的配置方法
2013/06/12 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
村主任个人对照检查材料
2014/10/01 职场文书
后备干部推荐材料
2014/12/24 职场文书
结婚典礼主持词
2015/06/29 职场文书
生日宴会祝酒词
2015/08/10 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书