jQuery MiniUI,Ajax Web开发

中文教程

阻止用户快速频繁点击,导致多次触发点击事件

一、前言

以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。

  • window对象的resize、scroll事件
  • 拖拽时的mousemove事件
  • 射击游戏中的mousedown、keydown事件
  • 文字输入、自动完成的keyup事件

实际上对于window的resize事件,实际需求大多为停止改变大小n毫秒后执行后续处理;而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法。

函数去抖(debounce)

如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。

也就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。

函数节流(throttle)

如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。

也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。

[Sencha] 破解 VS Code 的 Sencha 插件

用ExtJS开发企业级应用真的是非常方便,Visual Studio Code 搭配 Sencha Plugin 插件简直不要太好用。不过Sencha Plugin是收费的,可以用邮箱激活30天试用期。
因为VS Code基于NodeJS,其插件也是NodeJS写的,所以破解不难。


Sencha Test 测试新建应用程序

Sencha Studio 允许开发人员快速和自动测试一个应用程序或 web 页面的细微粒度方面。随着代码库的增长,单元 测试可以确保应用程序的所有部分按照你的预期运行。

本指南, 我们学习生成一个新的应用程序,并设置测试环境, 创建一个可测试的类, 并对它进行单元测试. 所有这些工作都可以在 Sencha Studio 中完成.

如果你有一个已存在的应用程序, 请看 测试已有应用程序.

本文假定你已经对 Jasmine 测试框架比较熟悉. 如果你不熟悉 Jasmine 或 测试的概念, 请查阅他们优秀的 文档,来获取更多关于编写 Jasmine 测试的信息. 本指南也使用了 Sencha Cmd 来生成 一个 Ext JS 应用程序,并假定你已经下载安装它了.

让我们开始吧!

Sencha Test 测试已有应用程序

Sencha Test 可以用来测试你现有的 web 应用程序,只需要很少的安装配置. 本指南会教你如何配置一个Sencha Test Workspace,来测试一个远程服务器上的已有应用程序. 当然, 因为应用程序也很容易运行在本地 web 服务器, 所以,不管你是开发者还是测试工程师,本指南都会带你入门测试应用程序.

创建 Workspace


你可以点击欢迎界面右下的 “New Workspace” 按钮来创建一个新的 workspace.


Sencha Test 入门

安装了 Sencha Test 之后, 下一步就是管理你的测试环境. 作为一个开发者或者测试工程师, 这些工作都在 Sencha Studio 上完成. 一旦你在 Sencha Studio 上创建并配置了你的测试环境, 你就可以使用 stc 命令行工具来自动执行测试. 本指南会介绍管理测试项目的核心概念,并展示如何开始使用 Sencha Studio.

Sencha Studio


启动 Sencha Studio 之后, 首先展示的是欢迎界面. 这是最顶层的界面,从这里可以打开或创建一个 workspace.

聚合内容