setTimeout 和 throttle 那些事儿
document.querySelector('#settimeout').onclick= function () {
setTimeout(function () {
console.log('test settimeout');
},);
}
setTimeout 是延迟执行,它内部应该有一个队列结构,也就是当我们再1s内狂点100下按钮时候,上面的函数虽然会1执行以下,但这100下都会执行完,这会涉及到一个问题
比如当我们有一个小的图片,鼠标放上去时候就再1s后浮动显示出大图片,当鼠标移开则消失,如果用setTimeout,的话,结果你懂的~
所以我们需要把这1s内的多余事件给丢弃, 所以引出了 throttle
/**
* 频率控制 返回函数连续调用时,func 执行频率限定为 次 / wait
*
* @param {function} func 传入函数
* @param {number} wait 表示时间窗口的间隔
* @param {object} options 如果想忽略开始边界上的调用,传入{leading: false}。
* 如果想忽略结尾边界上的调用,传入{trailing: false}
* @return {function} 返回客户调用函数
*/
_.throttle = function(func, wait, options) {
var context, args, result;
var timeout = null;
// 上次执行时间点
var previous = ;
if (!options) options = {};
// 延迟执行函数
var later = function() {
// 若设定了开始边界不执行选项,上次执行时间始终为0
previous = options.leading === false ? : _.now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
var now = _.now();
// 首次执行时,如果设定了开始边界不执行选项,将上次执行时间设定为当前时间。
if (!previous && options.leading === false) previous = now;
// 延迟执行时间间隔
var remaining = wait - (now - previous);
context = this;
args = arguments;
// 延迟时间间隔remaining小于等于0,表示上次执行至此所间隔时间已经超过一个时间窗口
// remaining大于时间窗口wait,表示客户端系统时间被调整过
if (remaining <= || remaining > wait) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
//如果延迟执行不存在,且没有设定结尾边界不执行选项
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
};
这个函数咋用呢?如下
var s= ;
var thth= throttle(
function (a) {
s++;
console.log(s);
//return '测试结果';
},
,
{ leading:true, trailing:true}
);
document.querySelector('#throtol').onclick= function () {
thth('测试参数');
};
另外补充下 如果settimeout()时间为负数 则表示 立即执行 如下
document.querySelector('#settimeout').onclick= function () {
setTimeout(function () {
console.log('test settimeout');
},-);
}
再ps: 关于 if else 打印结果是什么你知道吗
document.querySelector('#settimeout').onclick= function () {
if(true){
console.log();
}else if(true){
console.log();
}else if(false){
console.log();
}else if(true){
console.log();
}
}
打印的只有111……基础知识啊………………
setTimeout 和 throttle 那些事儿的更多相关文章
- MVC与Validate验证提示的样式修改
MVC中使用Validate的验证,要修改错误提示样式一共有3处需要修改,否则就不太完美了: MVC中的Validate的验证机制只用在后台写一次,就可以完成前台和后台的完美验证,前台的验证主要是依靠 ...
- js实现图片(高度不确定)懒加载
最近一直在弄广告页,由于广告页几乎都是图片拼凑起来的,为了减少服务器压力和带宽,采用图片懒加载方式,但是我们的图片高度又不确定,所以我在网上下载了echo.js自己改了一下. 大体思路是:让首页先加载 ...
- JS 防抖函数和节流函数
文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...
- JS图片赖加载例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- setTimeout那些事儿
一.setTimeout那些事儿之单线程 一直以来,大家都在说Javascript是单线程,浏览器无论在什么时候,都且只有一个线程在运行JavaScript程序. 但是,不知道大家有疑问没——就是我们 ...
- throttle和debounce简单实现
function debounce(delay,fn){ var timer; return function(){ var ctx = this,args = arguments; clearTim ...
- setTimeout和setInterval的注意事项
精准问题 setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过 ...
- 精简的javascript下throttle和debounce代码
//频率控制 函数连续调用时,fn 执行频率限定为 1次/waitMs.立即执行1次 function throttle(fn, waitMs) { var lastRun = 0; return f ...
- JS魔法堂:函数节流(throttle)与函数去抖(debounce)
一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...
随机推荐
- composer 出现 configuration does not allow connection to http.......
出现这样的问题是,镜像使用的是http,而原地址是需要https,所以配置下关掉https就好了. 我们来个全局设置的方法: composer config -g secure-http false ...
- jquery获取ul中的第一个li
$("ul li:first"); $("ul li").eq(0);$("ul li").first();$("ul li&qu ...
- iOS 如何使用Safari浏览器打开app
1.首先在info.plist添加一个键值对,如下图 或 2.在appdelegate.m文件如下方法写代码 -(BOOL)application:(UIApplication*)app openUR ...
- 实用的圆形图片控件ImageView
1.用法直接在布局中引用即可 import android.content.Context;import android.content.res.TypedArray;import android.g ...
- 看看C# 6.0中那些语法糖都干了些什么(中篇)
接着上篇继续扯,其实语法糖也不是什么坏事,第一个就是吃不吃随你,第二个就是最好要知道这些糖在底层都做了些什么,不过有一点 叫眼见为实,这样才能安心的使用,一口气上五楼,不费劲. 一:字符串嵌入值 我想 ...
- Java实现上传下载
一.上传 二.下载 import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.Fi ...
- zookeeper事务
zookeeper事物操作,其实只是其multi操作的简单封装: public List<OpResult> multi(Iterable<Op> ops) 基本操作:new ...
- [转]Oracle 12c多租户特性详解:PDB 的创建、克隆与维护
转自:http://chuansong.me/n/443660447865 PDB 的创建和访问 在使用 dbca 建库时,创建数据库之前,可以保存一下创建脚本,分析其具体执行过程.以自定义方式创建名 ...
- WPF 开发 WebBrowser
WebBrowser WebBrowser 报错如何屏蔽 CEF(Chromium Embedded Framework) 参考 WPF, Chrome Embedded and WebA ...
- .Net中DLL冲突解决(真假美猴王)
<西游记>中真假美猴王让人着实难以区分,但是我们熟知了其中的细节也不难把他们剥去表象分别出来.对问题不太关心的可以直接调到文中关于.Net文件版本的介绍 问题 最近在编译AKKA.net ...