解决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打开新窗口同时关闭旧窗口
Jan 16 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
javascript数据类型详解
Feb 07 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 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中文件上传的安全问题
2006/10/09 PHP
一个程序下载的管理程序(二)
2006/10/09 PHP
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
如何理解委托
2012/01/06 面试题
C#笔试题和英文面试题
2013/02/07 面试题
建筑自我鉴定
2013/10/19 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
五年级上册复习计划
2015/01/19 职场文书
小学运动会开幕词
2016/03/04 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python