前端框架中wait用法

JavaScript023

前端框架中wait用法,第1张

场景需要一次性调用多个接口或者进行多个事件同时执行。

Vue Wait是一个用于VUE、Vuex和Nuxt应用的复杂装载器和进度管理组件。Vue Wait帮助管理页面上的多个加载状态(状态之间没有任何冲突。

在前端js 中,有些应用场景需要一次性调用多个接口或者进行多个事件同时执行 可以用promse.all 来操作,在flutter 中有类似Future.wait的用法。

阻塞指的是暂停一个线程的执行以等待某个条件发生(如某资源就绪),JS单线程避免阻塞方法:

1.sleep()方法:sleep()允许指定以毫秒为单位的一段时间作为参数,使得线程在指定的时间内进入阻塞状态,不能得到CPU时间,指定的时间一过,线程重新进入可执行状态。

典型地,sleep()被用在等待某个资源就绪的情形:测试发现条件不满足后,让线程阻塞一段时间后重新测试,直到条件满足为止。

2.suspend()和resume()方法:两个方法配套使用,suspend()使得线程进入阻塞状态,并且不会自动恢复,必须其对应的resume()被调用,才能使得线程重新进入可执行状态。

suspend()和resume()被用在等待另一个线程产生的结果的情形:测试发现结果还没有产生后,让线程阻塞,另一个线程产生了结果后,调用resume()使其恢复。

3.yield()方法:yield()使得线程放弃当前分得的CPU时间,但是不使线程阻塞,即线程仍处于可执行状态,随时可能再次分得CPU时间。调用yield()的效果等价于调度程序认为该线程已执行了足够的时间从而转到另一个线程。

4.wait()和notify()方法:两个方法配套使用,wait()使得线程进入阻塞状态,有两种形式,一种允许指定以毫秒为单位的一段时间作为参数,另一种没有参数,前者当对应的notify()被调用或者超出指定时间时线程重新进入可执行状态,后者则必须对应的notify()被调用。

以前处理过高频事件,但是没有好好总结弄一下,这回抽点时间说一下。5

做过动画效果的同学一定经常碰到滚动控制的问题,像滚动或者resize这样的事件,触发频率太高又没啥规律可循,这个时候就有两个截流函数给我们使用:throttle和debounce。

throttle是让一个函数在指定的时间执行一次。比如用户滚动1s,只触发一次scroll事件。

debounce是让一个函数延迟一定的时间然后执行,只要触发这个函数,就重新开始等,到时间了然后执行。有网友给出了形象的电梯比喻这里我贴出来。

电梯比喻---debounce:(你在进入电梯后发现这时不远处走来了了一个人,等10秒钟,这个人进电梯后不远处又有个妹纸姗姗来迟,怎么办,再等10秒,于是妹纸上电梯时又来了一对好基友...,作为感动中国好码农,你要每进一个人就等10秒,直到没有人进来,10秒超时,电梯开动)

下面开动 自己实现一下。(注:在lodash underscore 中都实现了截流函数)

现在讲一下大概的思路,首先函数进来需要延迟执行,在延迟执行结束之前都不可以再次执行,所以我们用wait 作为一个flag作为判断,在fn执行完毕之后讲wait 设定回初始值(也就是允许函数再次执行)。

debounce 函数

debounce 的思路类似,每一次触发函数,都要去清除上一次的timer,甚至连wait  都可以省了。是不是很简单。

这个只是简易的实现,lodash弄的比较复杂,但是基本的原理都是一样的。