document.querySelector('#settimeout').onclick= 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').onclick= function () { thth('测试参数'); };
另外补充下 如果settimeout()时间为负数 则表示 立即执行 如下
document.querySelector('#settimeout').onclick= function () { setTimeout(function () { console.log('test settimeout'); },-1000); }
再ps: 关于 if else 打印结果是什么你知道吗
document.querySelector('#settimeout').onclick= 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……基础知识啊………………