解决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 捕获窗口关闭事件
Jul 26 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
Bootstrap4 gulp 配置详解
Jan 06 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 定义404页面的实现代码
2012/11/19 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
python多线程操作实例
2014/11/21 Python
Python常见工厂函数用法示例
2018/03/21 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
pandas的qcut()方法详解
2019/07/06 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
python如何对链表操作
2020/10/10 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
台湾森森购物网:U-mall
2017/10/16 全球购物
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
Java程序员常见面试题
2015/07/16 面试题
乡镇务虚会发言材料
2014/10/20 职场文书
入党自荐书范文
2015/03/05 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
python - timeit 时间模块
2021/04/06 Python
用python画城市轮播地图
2021/05/28 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技