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. AlloyRenderingEngine文本框组件

    写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine 在dom元素里,自带了input标签,设置其type为text,它就是一个文本框. ...

  2. Laravel大型项目系列教程(二)之用户管理

    Laravel大型项目系列教程(二) 一.前言 本节教程将大概实现用户的注册.修改个人信息.管理用户功能. 二.Let's go 1.创建用户注册视图 $ php artisan generate:v ...

  3. 原创 C++应用程序在Windows下的编译、链接:第二部分COFF/PE文件结构

    2.1概述 在windows操作系统下,可执行文件的存储格式是PE格式:在Linux操作系统下,可执行文件的存储格式的WLF格式.它们都是COFF格式文件的变种,都是从COFF格式的文件演化而来的. ...

  4. 前端HTML之页面结构

    前端工作一年了,期间由于工作需要,也做了一些产品的设计,因为自己的目标就是做编程,所以婉拒了与产品相关的一些任务,打算主要把精力放到编程这方面. PS:2015年1月进军编程行业. 废话不多讲,这一年 ...

  5. Android 强制设置横屏或竖屏 设置全屏

    (转自:http://blog.csdn.net/yuejingjiahong/article/details/6636981) 强制横屏: @Override protected void onRe ...

  6. 让我们用心感受泛型接口的协变和抗变out和in

    关键字out和in相信大家都不陌生,系统定义的很多泛型类型大家F12都或多或少看见了.但是实际中又很少会用到,以前在红皮书里看到,两三页就介绍完了.有的概念感觉直接搬出来的,只是说这样写会怎样,并没有 ...

  7. github常用操作

    1.创建一个新的repository: $cd ~/hello-world        //到hello-world目录,本地目录名与repository的名字不一定相同 $git init    ...

  8. ArrayList<E>源码分析

    ArrayList是按照线性表结构实现的 ArrayList的主要继承结构 public class ArrayList<E> extends AbstractList<E> ...

  9. github fork后的pull和保持同步

    前言 对github上的某个项目贡献自己的修改,但自己可能并没有那个仓库的权限,那要如何操作呢?git的机制和svn还是有些区别的,本文做些记录. 思路1 clone项目到本地,有修改之后,直接提交到 ...

  10. Dijkstra算法(三)之 Java详解

    http://www.cnblogs.com/skywang12345/p/3711516.html