博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
setTimeout 和 throttle 那些事儿
阅读量:6302 次
发布时间:2019-06-22

本文共 3363 字,大约阅读时间需要 11 分钟。

document.querySelector('#settimeout').οnclick= function () {        setTimeout(function () {            console.log('test settimeout');        },1000);    }

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 = 0;                    if (!options) options = {};                    // 延迟执行函数                    var later = function() {                      // 若设定了开始边界不执行选项,上次执行时间始终为0                      previous = options.leading === false ? 0 : _.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 <= 0 || 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= 0;var thth=   throttle(        function (a) {             s++;             console.log(s);             //return '测试结果';        },        1000,        { leading:true, trailing:true});document.querySelector('#throtol').οnclick= function () {    thth('测试参数');};

 另外补充下 如果settimeout()时间为负数 则表示 立即执行 如下

document.querySelector('#settimeout').οnclick= function () {        setTimeout(function () {            console.log('test settimeout');        },-1000);    }

 再ps: 关于 if else  打印结果是什么你知道吗 

document.querySelector('#settimeout').οnclick= function () {    if(true){        console.log(111);    }else if(true){        console.log(22);    }else if(false){        console.log(33);    }else if(true){        console.log(44);    }}

 打印的只有111……基础知识啊………………

转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6255881.html

你可能感兴趣的文章
mysql命令行常用命令
查看>>
Android上传文件到Web服务器,PHP接收文件(二)
查看>>
三:Mysql函数汇总
查看>>
解决Mac Preview不能打开eps文件
查看>>
Modifying file store configuration
查看>>
Format Currency Sample - Format as you type
查看>>
jquery闭包
查看>>
连续多个scanf 得到多个字符,针对回车字符的 解决方案
查看>>
php DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
查看>>
SquidMan代理简单配置
查看>>
velocity “ 如何引入
查看>>
《jenkins2.x持续集成部署教程》(2)配置jenkins
查看>>
aspnetcore mvc处理表单提交put
查看>>
Java-IO
查看>>
linux 设备驱动程序开发 第3版_Chapter2_Cconcurrency in th...
查看>>
PHP is_numeric 检测变量是否为数字或数字字符串
查看>>
自定义Behavior(二)
查看>>
UI控件之UIButton详解
查看>>
iOS 在UILabel显示不同的字体和颜色
查看>>
打入电话时Fragment生命周期
查看>>