考核内容:JAVASCRIPT定时器与事件 的使用
题发散度: ★★★
试题难度: ★★★
解题思路:
为什么要函数节流 由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。 比如以下情况: 1. window对象的resize、scroll事件 2. 拖拽时的mousemove事件 3. 射击游戏中的mousedown、keydown事件 4. 文字输入、自动完成的keyup事件 再详细点: 我们定义了一个鼠标滚动事件 : 我们的本意只是让鼠标滚动一次执行一次滚动函数,但是window的onscroll函数并不是等scroll结束之后才会调用,鼠标滚动或拖动滚动条,就会不停的触发scroll事件,如果处理的东西多,低版本的浏览器也会陷入假死状态。 解决办法: 函数节流 节流就像将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期 列举代码如下:
function throttle(method, delay, time) {var timeout,startTime = new Date();return function() {var context = this,args = arguments,curTime = new Date();clearTimeout(timeout); // 如果达到了规定的触发时间间隔,触发 handlerif (curTime - startTime >= time) {method.apply(context, args);startTime = curTime; // 没达到触发间隔,重新设定定时器} else {timeout = setTimeout(method, delay);}};
函数中,当一次时间较长的时候还是会执行两次,而不是等滚动停止之后再执行。达到了想要的效果,既没有频繁的执行也没有最后执行;
常用的应用场景:图片懒加载
参考以上的解析:
ABC都正确
答案:不正确的是
D. js函数节流会阻断函数的运行,从而降低js运行效率