js防抖和节流

【摘要】 js防抖和节流考必过小编为大家整理了关于js防抖和节流的信息，希望可以帮助到大家！

js防抖和节流

赋能行业 回馈老用户-免费领1门建筑业技能课

¥0

去购买​

标签：nts   延时   返回值   输入   没有   yqi   用户输入   时间   pre   

防抖

触发高频事件后，n秒内函数只执行一次，如果n秒内高频事件再次被触发则重新计算时间。

思路：

每次触发事件时，都取消之前的延时调用方法。

function debounce(fn,wait) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      let timeWait = wait || 1000
      return function () {
           const that = this,
                    args = arguments;
           clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
           timeout = setTimeout(() => { 
              fn.apply(that , args);//1,this 指向2,event 对象
           }, timeWait);
      };
 }

防抖

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

思路：

每次触发事件时都判断当前是否有等待执行的延时函数

function throttle(fn,wait) {
      let canRun = true; // 通过闭包保存一个标记
      let timeWait = wait || 1000;
      return function () {
      		const that = this,
                     args = arguments;
	        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
	        canRun = false; // 立即设置为false
	        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
		          fn.apply(that,  args );
		          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
		          canRun = true;
	        }, 500);
      };
}

链接：
JavaScript专题之跟着underscore学防抖
JavaScript专题之跟着 underscore 学节流

js防抖和节流

标签：nts   延时   返回值   输入   没有   yqi   用户输入   时间   pre   

以上就是js防抖和节流的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！