2020-06-19 21:05发布
面试的时候被问到js怎么防抖动，该怎么回答比较好
// 包装事件的debounce函数function debounce(func, delay){ let timer = null; return function(){ let context = this; // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量 let args = arguments; clearTimeout(timer); timer = setTimeout(function(){ func().apply(context, args); }, delay) }}// 当用户滚动时被调用的函数function foo(){ cosnole.log("todo somethind"); }// 元素绑定scoll事件，触发包装函数debouncelet elem = document.getElementById('container');elem.addEventListener('scroll', debounce(foo, 2000));
首先从使用场景出发进行阐述，然后简述原理
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。
下面放个简单的防抖案例：
// 防抖 function debounce(fn, wait) { var timeout = null; return function() { if(timeout !== null) clearTimeout(timeout); timeout = setTimeout(fn, wait); } } // 处理函数 function handle() { console.log(Math.random()); } // 滚动事件 window.addEventListener('scroll', debounce(handle, 1000));
当持续触发scroll事件时，事件处理函数handle只在停止滚动1000毫秒之后才会调用一次，也就是说在持续触发scroll事件的过程中，事件处理函数handle一直没有执行。
函数防抖的实现思路如下：将目标方法（动作）包装在setTimeout里面，然后这个方法是一个事件的回调函数，如果这个回调一直执行，那么这些动作就一直不执行。为什么不执行呢，我们设置了一个clearTimeout，这样setTimeout里的方法就不会执行！ 为什么要clearTimeout呢，我们就需要将事件内的连续动作删掉嘛！待到用户不触发这事件了。那么setTimeout就自然会执行这个方法。
Js给初学者的印象总是那么的杂而乱，相信很多初学者都在找轻松学习Js的途径。在这里给大家总结一些学习Js的经验，希望能给后来的学习者探索出一条轻松学习Js之路。Js给人那种感觉的原因多半是因为它如下的特点：A：本身知识很抽象、晦涩难懂，如：闭包、内置...
看图：
基本类型( 6种 )：Number ( 数值 ) String ( 字符串 )Boolean ( 布尔 ) Undefined ( 未定义 )Null ( 空 )ES6 - Symbol ( 唯一 )
JavaScript 使网页增加互动性，使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。...
timeoutId: 定时器IDfunc: 延迟后执行的函数code: 延迟后执行的代码字符串，不推荐使用原理类似eval()delay: 延迟的时间（单位：毫秒），默认值为0param1,param2: 向延迟函数传递而外的参数，IE9以上支持setInterval: 以固定的时间间隔重复调用一个函...
Number类型String类型Boolean类型Undefined类型Null类型
空格在ASCII中的值为32，空字符为0,可本人觉得不就是都是为空的吗，没有什么区别？char mychar1,mychar2;mychar1=' ';mychar2='\0';printf(mychar1=%d,mychar2=%d,mychar1,mychar2);//其中mychar1=32;mychar2=0;...
1.变量名可以有数字0~9、大小写字母、下划线、美元符$组成。2.变量名不能以数字开头。 当我们以数字为开头时,代码就会出现橙色下划线,代表命名不...3.变量名不允许使用中文。 不能允许使用中文这个就不用多说了吧,不管你在哪找代码来看,代码中...4.区分大小写...
向一个对象数组里面添加新的属性var arry= [{a:11,b:22,c:33,d:44},{a:11,b:0,c:0,d:44},{a:11,b:22,c:99,d:99}];var arry2=[];arry.map(((item, index)=> {arry2.push(Object.assign({},item,{mess1:item.c,mess2:item.d}))}))cons...
我觉得getTopWindow(） 应该是他自己写的函数 mask 应该是getTopWindow(）函数中 return 出的一个什么玩意show() jQuery的显示
看上图
如图所示
1、原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链 2、 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链...
如图所示，最简单的选项卡思路：选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。1、首先获取元素。2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。3、因为点击当前按钮时会以高亮状态显示，所以...
1、js截取两个字符串之间的内容：123var str = aaabbbcccdddeeefff; str = str.match(/aaa(\S*)fff/)[1]; alert(str);//结果bbbcccdddeee2、js截取某个字符串前面的内容：123var str = aaabbbcccdddeeefff; tr = str.match(/(\S*)fff/)[1];......
如果是ajax 就直接获取如果是传到一个页面 就再get再在js中使用 就可以获取了。 可以在js中获取一个变量 但是不能写入一段java代码.
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 DAYTOY 的问题《js防抖动》','http://www.shouhuola.com/q-20284.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
// 包装事件的debounce函数
function debounce(func, delay){
let timer = null;
return function(){
let context = this; // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
func().apply(context, args);
}, delay)
}
}
// 当用户滚动时被调用的函数
function foo(){
cosnole.log("todo somethind");
}
// 元素绑定scoll事件，触发包装函数debounce
let elem = document.getElementById('container');
elem.addEventListener('scroll', debounce(foo, 2000));
// 包装事件的debounce函数
function debounce(func, delay){
let timer = null;
return function(){
let context = this; // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
func().apply(context, args);
}, delay)
}
}
// 当用户滚动时被调用的函数
function foo(){
cosnole.log("todo somethind");
}
// 元素绑定scoll事件，触发包装函数debounce
let elem = document.getElementById('container');
elem.addEventListener('scroll', debounce(foo, 2000));
首先从使用场景出发进行阐述，然后简述原理
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。
下面放个简单的防抖案例：
当持续触发scroll事件时，事件处理函数handle只在停止滚动1000毫秒之后才会调用一次，也就是说在持续触发scroll事件的过程中，事件处理函数handle一直没有执行。
函数防抖的实现思路如下：将目标方法（动作）包装在setTimeout里面，然后这个方法是一个事件的回调函数，如果这个回调一直执行，那么这些动作就一直不执行。为什么不执行呢，我们设置了一个clearTimeout，这样setTimeout里的方法就不会执行！ 为什么要clearTimeout呢，我们就需要将事件内的连续动作删掉嘛！待到用户不触发这事件了。那么setTimeout就自然会执行这个方法。
相关问题推荐
Js给初学者的印象总是那么的杂而乱，相信很多初学者都在找轻松学习Js的途径。在这里给大家总结一些学习Js的经验，希望能给后来的学习者探索出一条轻松学习Js之路。Js给人那种感觉的原因多半是因为它如下的特点：A：本身知识很抽象、晦涩难懂，如：闭包、内置...
看图：
基本类型( 6种 )：Number ( 数值 ) String ( 字符串 )Boolean ( 布尔 ) Undefined ( 未定义 )Null ( 空 )ES6 - Symbol ( 唯一 )
JavaScript 使网页增加互动性，使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。...
timeoutId: 定时器IDfunc: 延迟后执行的函数code: 延迟后执行的代码字符串，不推荐使用原理类似eval()delay: 延迟的时间（单位：毫秒），默认值为0param1,param2: 向延迟函数传递而外的参数，IE9以上支持setInterval: 以固定的时间间隔重复调用一个函...
Number类型String类型Boolean类型Undefined类型Null类型
空格在ASCII中的值为32，空字符为0,可本人觉得不就是都是为空的吗，没有什么区别？char mychar1,mychar2;mychar1=' ';mychar2='\0';printf(mychar1=%d,mychar2=%d,mychar1,mychar2);//其中mychar1=32;mychar2=0;...
1.变量名可以有数字0~9、大小写字母、下划线、美元符$组成。2.变量名不能以数字开头。 当我们以数字为开头时,代码就会出现橙色下划线,代表命名不...3.变量名不允许使用中文。 不能允许使用中文这个就不用多说了吧,不管你在哪找代码来看,代码中...4.区分大小写...
向一个对象数组里面添加新的属性var arry= [{a:11,b:22,c:33,d:44},{a:11,b:0,c:0,d:44},{a:11,b:22,c:99,d:99}];var arry2=[];arry.map(((item, index)=> {arry2.push(Object.assign({},item,{mess1:item.c,mess2:item.d}))}))cons...
我觉得getTopWindow(） 应该是他自己写的函数 mask 应该是getTopWindow(）函数中 return 出的一个什么玩意show() jQuery的显示
看上图
如图所示
1、原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链 2、 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链...
如图所示，最简单的选项卡思路：选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。1、首先获取元素。2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。3、因为点击当前按钮时会以高亮状态显示，所以...
1、js截取两个字符串之间的内容：123var str = aaabbbcccdddeeefff; str = str.match(/aaa(\S*)fff/)[1]; alert(str);//结果bbbcccdddeee2、js截取某个字符串前面的内容：123var str = aaabbbcccdddeeefff; tr = str.match(/(\S*)fff/)[1];......
如果是ajax 就直接获取如果是传到一个页面 就再get再在js中使用 就可以获取了。 可以在js中获取一个变量 但是不能写入一段java代码.