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 那些事儿的更多相关文章

  1. MVC与Validate验证提示的样式修改

    MVC中使用Validate的验证,要修改错误提示样式一共有3处需要修改,否则就不太完美了: MVC中的Validate的验证机制只用在后台写一次,就可以完成前台和后台的完美验证,前台的验证主要是依靠 ...

  2. js实现图片(高度不确定)懒加载

    最近一直在弄广告页,由于广告页几乎都是图片拼凑起来的,为了减少服务器压力和带宽,采用图片懒加载方式,但是我们的图片高度又不确定,所以我在网上下载了echo.js自己改了一下. 大体思路是:让首页先加载 ...

  3. JS 防抖函数和节流函数

    文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...

  4. JS图片赖加载例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. setTimeout那些事儿

    一.setTimeout那些事儿之单线程 一直以来,大家都在说Javascript是单线程,浏览器无论在什么时候,都且只有一个线程在运行JavaScript程序. 但是,不知道大家有疑问没——就是我们 ...

  6. throttle和debounce简单实现

    function debounce(delay,fn){ var timer; return function(){ var ctx = this,args = arguments; clearTim ...

  7. setTimeout和setInterval的注意事项

    精准问题 setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过 ...

  8. 精简的javascript下throttle和debounce代码

    //频率控制 函数连续调用时,fn 执行频率限定为 1次/waitMs.立即执行1次 function throttle(fn, waitMs) { var lastRun = 0; return f ...

  9. JS魔法堂:函数节流(throttle)与函数去抖(debounce)

    一.前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemov ...

随机推荐

  1. javascript的理解及经典案例

    js的简介: JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言. 你可以利用JavaScript轻易的做出亲切的欢迎讯息.漂亮的数字钟.有广告效 ...

  2. FreeMarker的基础语法

    FreeMarker语言 FreeMarker语言概述 FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写. FreeMarker被设计用来生成HTML Web ...

  3. 关于MySQL数据库优化的部分整理

    在之前我写过一篇关于这个方面的文章 <[原创]为什么使用数据索引能提高效率?(本文针对mysql进行概述)(更新)> 这次,主要侧重点讲下两种常用存储引擎. 我们一般从两个方面进行MySQ ...

  4. 【干货分享】前端面试知识点锦集03(JavaScript篇)——附答案

    三.JavaScript部分 1.谈谈你对Ajax的理解?(概念.特点.作用) AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是 ...

  5. 商业智能软件对比评测:FineBI和Tableau

    FineBI和Tableau是比较好的自助式商业智能软件,功能都很强大,是企业数据可视化不可或缺的利器,但两款产品还是有非常大的区别的,例如Tableau的功能全面且深入,更适合专业的数据分析人员,而 ...

  6. 初识JAVA(二)(送给Java和安卓初学者)----常见错误

    博主接着上篇的来讲哦,以后的更新中,博主会出一些练习题,有兴趣的可以做做然后吧代码粘贴到下面,大家可以一起研究学习,一起进步,本篇文章主要讲的是: 一.常见错误 二.连接上篇一起的训练 无论是什么方向 ...

  7. block为什么用copy以及如何解决循环引用

    在完成项目期间,不可避免的会使用到block,因为block有着比delegate和notification可读性更高,而且看起来代码也会很简洁.于是在目前的项目中大量的使用block. 之前给大家介 ...

  8. Json对象与Json字符串互转(4种转换方式)

    Json字符与Json对象的相互转换方式有很多,接下来将为大家一一介绍下,感兴趣的朋友可以参考下哈,希望可以帮助到你 1>jQuery插件支持的转换方式: 复制代码代码如下: $.parseJS ...

  9. 错误: “WebForm_DoPostBackWithOptions”未定义

    无论是ASP.NET WebForm 还是 ASP.NET MVC项目,在本地程序测试没问题,但是部署在IIS上访问就会出现  错误: “WebForm_DoPostBackWithOptions”未 ...

  10. APUE 习题3-2 实现dup2,要求不使用fcntl函数。

    int mydup2(int oldfd, int newfd) {     int tfd = 0;     if (newfd < 0)     {         err_sys(&quo ...