取消和请求限制的高效技巧-实现防抖-节流-阻止重复请求-Vue (取消和请求限制的区别)
当用户连续点击多次同一个按钮时,最后一次点击之后,过小段时间后才发起一次请求。
原理:每次调用方法后都产生一个定时器,定时器结束以后再发请求,如果重复调用方法,就取消当前的定时器,创建新的定时器,等结束后再发请求。
工作当中可以用第三方封装的工具函数例如lodash的debounce方法来简化防抖的代码。
debounce.js javascript // 实现debounce函数 const debounce = (func, wait) => { let timeoutId; return (...args) => { if (timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(() => { func(...args); }, wait); }; };有关vue的常见面试题(上)
防抖 :一个频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效。 例:防抖经常用在我们搜索框输入搜索,点击提交,防止等; 节流 :一个频繁触发的函数,在规定时间内,函数执行一次后,只有大于设定的执行周期后才会执行第二次。 例:节流一般在onresize、mousemove、滚动事件等事件中使用,防止过多的请求造成服务器压力
![取消和请求限制的高效技巧](https://tyye.cn/zb_users/theme/tpure/style/images/lazyload.png)
盒模型的组成:元素的内容content、元素的内边距padding、元素的外边距margin、元素的边框border 盒模型分为 : W3C标准盒子 、IE盒子 W3C标准盒子(content-box) :又称内容盒子,是指块元素box-sizing属性为content-box的盒模型,盒子总宽度 = margin + border + padding + width IE盒子(border-box) :又称怪异盒模型(边框盒子),是指块元素box-sizing属性为border-box的盒模型,盒子总宽 = margin + width
()与join()一样都是把数组转成以逗号分割的字符串 () 删除数组的最后一项 () 往数组最后添加新数据 () 删除数组最前面的一项
var定义的变量可以修改,如果不初始化会输出undefined,不会报错。 const定义的变量不可以修改,而且必须初始化 let是块级作用域,函数内部使用let定义后,对函数外部无影响。
1.都支持服务器端渲染 2.都有虚拟dom,组件化开发,都有‘props’的概念,允许父组件往子组件传送数据,都实现webComponent规范 3.数据驱动视图 4.都有支持native的方案,React的React native,Vue的weex 5.构建工具 React和Vue都有自己的构建工具,你可以使用它快速搭建开发环境。React可以使用Create React App (CRA),而Vue对应的则是vue-cli。都有管理状态,React有redux,Vue有自己的Vuex
设计思想 react 1.函数式思想,all in js ,jsx语法,js操控css 2.单项数据流 重新渲染 4.每当应用的状态被改变时,全部子组件都会重新渲染。当然,这可以通过shouldComponentUpdate这个生命周期方法来进行控制,如果为true继续渲染、false不渲染,但Vue将此视为默认的优化。 vue 1.响应式思想,也就是基于数据可变的。把html、js、css、组合到一起,也可以通过标签引擎组合到一个页面中 2.双向绑定,每一个属性都需要建立watch监听(页面不用,涉及到组件更新的话需要) 宣称可以更快地计算出虚拟 DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树 性能 react ----大型项目、优化需要手动去做,状态可控 vue ------中小型项目、状态改变需要watch监听,数据量太大的话会卡顿 扩展性 react 1 类式写法api少,更容易结合ts 2 可以通过高阶组件来扩展 vue 1 声明式写法,结合ts比较复杂 2 需要通过mixin方式来扩展
vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach 导航钩子3个参数(to,from,next):
到达这个组件时:
离开这个组件时:beforeRouteLeave:(to,from,next)=>{} 确认离开next();取消离开next(false);
beforeEnter:(to,from,next)=>{},用法与全局守卫一致。只是,将其写进其中一个路由对象中,只在这个路由下起作用。
方法一: 子组件绑定一个事件,通过 this.$emit() 来触发 在子组件中绑定一个事件,并给这个事件定义一个函数
在父组件中定义并绑定 handleChange 事件
方法二: 通过 callback 函数 先在父组件中定义一个callback函数,并把 callback 函数传过去
在子组件中接收,并执行 callback 函数
方法三: 通过 $parent /$children 或 $refs 访问组件实例 这两种都是直接得到组件实例,使用后可以直接调用组件的方法或访问数据。 这种方式的组件通信不能跨级
方法四: $attrs和$listeners
JS中节流和防抖函数的实现和区别
在前端开发中,经常和 DOM 、 BOM 打交道,例如:窗口的resize、scroll,输入框内容校验,按钮点击等等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 throttle(节流) 和 debounce(防抖) 的方式来减少调用频率,提高性能的同时又不影响实际效果。
实现方式:每次触发事件时,如果当前有等待执行的延时函数,则直接return。
区别 : 节流函数 不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而 防抖函数 只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。
Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。其中就封装好了节流函数throttle和防抖函数debounce 。
参数:
返回:(Function): 返回 节流 的函数。
例子:
参数:
返回:(Function): 返回新的debounced (防抖动)函数。
例子:
1.节流 :使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。 2.防抖 :将多次操作合并为一次操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。
欢迎访问: 天问博客
免责声明:本文转载或采集自网络,版权归原作者所有。本网站刊发此文旨在传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及版权、内容等问题,请联系本网,我们将在第一时间删除。同时,本网站不对所刊发内容的准确性、真实性、完整性、及时性、原创性等进行保证,请读者仅作参考,并请自行核实相关内容。对于因使用或依赖本文内容所产生的任何直接或间接损失,本网站不承担任何责任。