解决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 相关文章推荐
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
javascript常用代码段搜集
Dec 04 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
js实现表格筛选功能
Jan 18 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
VUE重点问题总结
Mar 19 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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实现ping
2006/10/09 PHP
php GUID生成函数和类
2014/03/10 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php生成短域名函数
2015/03/23 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
利用python将图片转换成excel文档格式
2017/12/30 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
综合素质的自我鉴定
2013/10/07 职场文书
毕业生实习鉴定
2013/12/11 职场文书
学子宴答谢词
2014/01/25 职场文书
机关搬迁方案
2014/05/18 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL