方法一:(此方法是建立在假设javascript的执行存在并发性的情况,并假设uuid获得一定是唯一的id)
/** 利用Array的push本身具有次序,最后肯定只有一个对象在首位 */
function Delayer(callback,delayTime){
this.callback = callback;
this.count = 0;
this.delayTime = delayTime;
this.queue = new Array();
this.ring = 0;
}
/* 此方法为UUID实现摘自网络 */
Delayer.prototype.getUniqueId = function(){
var s = [], itoh = '0123456789ABCDEF';
// Make array of random hex digits. The UUID only has 32 digits in it, but we
// allocate an extra items to make room for the '-'s we'll be inserting.
for (var i = 0; i <36; i++) s[i] = Math.floor(Math.random()*0x10);
// Conform to RFC-4122, section 4.4
s[14] = 4; // Set 4 high bits of time_high field to version
s[19] = (s[19] & 0x3) | 0x8; // Specify 2 high bits of clock sequence
// Convert to hex chars
for (var i = 0; i <36; i++) s[i] = itoh[s[i]];
// Insert '-'s
s[8] = s[13] = s[18] = s[23] = '-';
return s.join('')+'-'+(++this.ring); //通过ring更加提高唯一性
}
Delayer.prototype.delay = function(){
//减少后来者进入
if (this.count == 0) {
++this.count;
var uniqueId=this.getUniqueId();
this.queue.push(uniqueId);
//通过判断第一push进去的id是否是自己来决定是否执行
if (this.queue[0] == uniqueId) {
var self=this;
setTimeout(function(){
try{self.callback();}catch(err){}
//执行完后将值清空,保证下次还能执行
finally{
self.count = 0;
self.queue = new Array();
if(self.ring > 9999) self.ring = 0;
}
},this.delayTime);
}
}
}
方法二:(更为简洁,不过是以假设++variable的值一定不会相同为前提)
function Delayer(callback,delayTime){
this.callback = callback;
this.count = 0;
this.delayTime = delayTime;
}
Delayer.prototype.delay = function(){
if(++this.count==1){
var self=this;
setTimeout(function(){
try{self.callback();}catch(err){}
//执行完后将值清空,保证下次还能执行
finally{
self.count = 0;
}
},this.delayTime);
}
}
执行代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
</body>
<script type="text/javascript" src="Delayer.js"></script>
<script type="text/javascript">
function sayHello(){alert('hello')}
var sayHelloDelayer = new Delayer(sayHello,100);
sayHelloDelayer.delay();
sayHelloDelayer.delay();
sayHelloDelayer.delay();
sayHelloDelayer.delay();
sayHelloDelayer.delay();
</script>
</html>
分享到:
相关推荐
Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...
JavaScript是Web开发中不可或缺的一部分,尤其在现代Web应用中,它承担着实现动态交互和富内容展示的关键任务。为了提升JavaScript的运行效率,我们需要关注如何优化JavaScript和CSS的加载与执行,以提供更好的用户...
在Web开发领域,有时我们需要确保用户在同一时间内只能登录一次系统。这种设计逻辑可以有效地避免同一账户被不同设备同时登录所导致的安全隐患及用户体验下降的问题。本文将详细解释如何实现这一功能,并提供具体的...
在后端,服务器需要处理这些请求,可能需要对相同请求进行幂等性设计。幂等性意味着无论执行多少次,同一个请求都应该产生同样的结果。比如,对于表单提交,服务器可以检查是否已经接收到相同的数据,如果已经处理过...
5. **优化用户体验**:为了防止频繁的请求,我们可以设置一个延迟,比如200毫秒,只有当用户停止输入一段时间后才发送请求。这被称为“节流”(debouncing)或“防抖”(throttling)。 6. **错误处理**:确保处理...
- 对于特定的用户ID(UID),限制其访问频率,并缓存页面结果,在一定时间内对相同请求返回同样的页面。 - 对于特定商品或服务的查询,也可以采用类似的页面缓存策略。 3. **服务层请求拦截与数据缓存**: - **...
Axios.js是一个非常流行的JavaScript库,它主要用于在Web应用程序中执行HTTP请求,特别是在现代前端开发中,它极大地简化了与服务器的数据交互。由于其轻量级、易用性和丰富的特性,Axios已经成为开发者首选的Ajax...
防抖函数会在用户停止触发事件一段时间后才执行,而节流函数则保证在一定时间内只执行一次。 总结来说,防止 PHP 表单重复提交可以从多个角度实现,包括客户端的 JavaScript 验证、Cookie 和 Session 管理、数据库...
Ajax(Asynchronous JavaScript and XML)是一种创建交互式网页应用的技术,它可以实现页面的部分刷新,无需重新加载整个页面。 1. **系统分析**: - **客户端设计**:使用Ajax技术可以提高用户体验,使用户界面...
5. **性能优化**:由于文件转换可能涉及大量计算,可以考虑使用缓存策略,比如将转换后的文件存储一段时间,下次请求相同文件时直接返回缓存结果,减少服务器压力。 6. **跨平台兼容性**:确保预览功能在不同的...
及时同步(也称作“同步块”)确保在同一时刻只有一个线程能访问特定代码段,而定时同步(例如定时任务)则允许在预定时间间隔执行特定操作,以避免资源冲突。 理解这些基础概念对于学习和开发JSP应用至关重要。...
在客户端执行跳转,一般通过JavaScript实现。以下是一个简单的示例: ```html <script language="javascript" type="text/javascript"> window.location = "http://www.517z.com"; ``` 这段JavaScript代码...
// 每60秒执行一次 }); ``` 这段JavaScript代码使用jQuery,每隔60秒(60000毫秒)调用`fetchContent`函数,该函数通过Ajax请求Java后端服务,将抓取的HTML内容填充到页面中。 总结,通过Jsoup,我们可以轻松地...
在React中,我们可以利用`componentDidMount`来启动轮播动画(例如,设置一个定时器每隔一段时间自动切换图片),并在`componentDidUpdate`或`componentWillUnmount`中管理这个定时器,确保组件卸载时停止不必要的...
在JavaScript中,可以通过原型链实现继承,如`b.prototype = new a()`,这样`b`的实例就可以访问到`a`的原型链上的所有属性和方法。在给定的例子中,`c`是`b`的实例,因此`c.getName()`会返回'阿里巴巴',而`c ...
1. 监听输入框的`keyup`事件,判断用户是否停止输入,如设定一个时间间隔(如300毫秒),如果在这段时间内没有新的按键事件,就发送Ajax请求。 2. 发送Ajax请求到服务器,传递当前输入框的值作为查询参数。 3. ...
节流技术则是让函数在一定时间内最多只执行一次,无论该时间段内函数被调用了多少次。它常用于限制如窗口滚动事件的处理频率,防止每次滚动都触发昂贵的计算。节流函数可以确保函数在设定的时间间隔内至少执行一次,...
3. **第三次挥手**:一段时间后,服务器没有要向客户端发送的数据了也会发送一个FIN包来表示同意关闭连接。 4. **第四次挥手**:客户端收到FIN包后,同样发送一个ACK确认包,至此四次挥手结束,客户端与服务器的连接...