vue前端方法等待几秒后执行

⑴ 前端框架中wait用法

场景需要一次性调用多个接口或者进行多个事件同时执行。
Vue Wait是一个用于VUE、Vuex和Nuxt应用的复杂装载器和进度管理组件。Vue Wait帮助管理页面上的多个加载状态(状态之间没有任何冲突。
在前端js 中,有些应用场景需要一次性调用多个接口或者进行多个事件同时执行 可以用promse.all 来操作，在flutter 中有类似Future.wait的用法。

⑵ vue $emit 调用父组件异步方法，执行完毕后再执行子组件的某方法，如何实现

//可以使用回调的方法

//父页面
//父页面调用组件的html中添加事件@test="test"
methods:{
test(data,cab){
setTimeout(()=>{
//这里使用定时器模拟执行完方法
console.log(data)//这是传递过来的参数用于处理
data++
cab(data)//将处理完成的数据返回回去
},2000)
}
}

//子页面

this.$emit('tset',1,(res)=>{
console.log(res)//2秒后会执行这一句打印2

})
//我们也可以用Promise的方法代替回调
methods:{
test(data){
returnnewPromise((resolve)=>{
setTimeout(()=>{
//这里使用定时器模拟执行完方法
console.log(data)//这是传递过来的参数用于处理
data++
resolve(data)//将处理完成的数据返回回去
},2000)
})
}
}

//子页面

constres=awaitthis.$emit('tset',1)
console.log(res)//2秒后会执行这一句

⑶ 怎麽让网页JS等待几秒再执行

和楼主一样，当初也很反感setTimeout，后来搞懂原理后，用起来就舒服了。在JS中，setTimeout本来就干这事的，不用它还真不行，当然你也可以用JQuery里面的delay方法，但它的原理也是用的setTimeout方法

方法A()
setTimeout(function(){
方法B()
},2000)

⑷ 使等待几秒钟前执行的代码的应用程序吗

第一个Show方法运行后，你的主程序还是会进行，你的代码还是会继续进行下去。此时，窗体还是弹出的。
第二个ShowDialog方法运行后，此时，弹出的一个窗体，你不将其关闭，那么，主程序就会一直等待这个窗体关闭后，才执行后面的代码。

所以，你只需要使用showdialog这个方法，即可达到你想要的结果。

那么，如何才能让弹出的窗体不改变呢？很简单
你可以找到窗体的formcloseing事件，在这个事件中，有一个参数：e
这个e有一个属性，就是e.handle，表示是否处理过这个事件了。
这个时候，如果你不想让窗体关闭，你可以写：
e.handle=true，那么表示已经处理过窗体关闭的事件了。
注：有些情况，可能是：e.cancel=true

⑸ 页面加载完成后等待一段时间在执行js的方法，时间如何设定

例如方法：
function test(){return 1;}
页面加载完毕事件：
window.onload = function(){
setTimeout(test,1000);//1000毫秒=1秒后执行test方法
}
如果你使用jquery的话可以：
$(window).load(function(){
setTimeout(test,1000);//1000毫秒=1秒后执行test方法
});

setTimeout是只执行一次，重复执行使用setInterval

window.onload = function(){
setInterval(test,1000);//1000毫秒=1秒，每隔1秒执行一次test方法
}

⑹ c# 执行一个方法之后，等待几秒，再执行另一个方法！ 怎么写

用线程的话如楼上所说；也可以在你想要停顿的地方写一个上万次（不够再加）的什么都不做的循环。

⑺ Web前端如何使用Vue编写一个长按指令

今天小编要跟大家分享的文章是关于Web前端如何使用Vue编写一个长按指令?正在从事web前端工作的小伙伴们有没有想过只需按住一个按钮几秒钟就能在你的
Vue应用中触发一个功能?


有没有想过创建一个按钮，按下一次就可以清除单次输入(或者持续按住可以清除所有输入)?


本文就是讲解如何在按下(或者按住)一个按钮时，既执行一个函数，又清除输入。


首先，我会讲解如何使用纯JS实现。而后也会创建一个Vue指令。下面就让我们一起来看一看吧。

一、原理


要实现长按，用户需要按下并按住按钮几秒钟。


想通过代码模拟这一效果，我们需要在鼠标“点击”按下按钮时，启动一个计时器监听用户按下的时长，如果时间超过我们期望的时长，就执行相应的函数。


非常简单!然而，我们需要知道用户何时按住按钮。


二、如何实现


当用户点击按钮时，在点击事件之前会触发另外两个事件:mousedown和mouseup。


当用户按下按钮时触发mousedown事件，用户松开按钮时调用mouseup事件。


我们需要做的是:


1.mousedown事件触发时，启动计时器。


2.一旦mouseup事件在预期的2秒前被触发，就清除计时器，不要执行相应的函数。就当作一个普通的点击事件。


只要计时器在我们预设的时间内没有被清除，即mouseup
事件没有被触发——那么可以断定用户没有释放按钮。因此，可以判定为一次长按，可以执行关联的函数。


三、实践


让我们深入代码，完成这一功能。


首先，我们必须定义三件事，即:


1.一个变量用于存储计时器。


2.一个启动功能函数，用于启动计时器。


3.一个取消功能函数，用于取消计时器。


1、变量


这个变量主要用来保存setTimeout的值，以便当鼠标mouseup事件触发时我们可以取消它。


letpressTimer=null;


我们把变量值设置为null是为了在执行取消操作前，检查这个变量的值判断当前是否有一个正在运行的计时器。


2、启动函数


这个函数包括一个setTimeout，它是JavaScript中的一个基本方法，允许在特定时间之后执行一个函数。


注意，click事件执行的过程中，会触发另外两个事件。但是我们需要启动计时器的是mousedown
事件。如果只是点击事件，不需要启动计时器。//创建计时器(1s之后执行函数)

letstart=(e)=>{

//如果是点击事件，不启动计时器

if(e.type==='click'&&e.button!==0){

return;

}

//在启动一个定时器之前确保没有正在运行的计时器

if(pressTimer===null){

pressTimer=setTimeout(()=>{

//执行任务!!!

},1000)

}

}

3、取消函数


这个函数见名知意，用来取消启动函数创建的setTimeout。


要取消setTimeout，可以使用JavaScript中的clearTimeout方法，它主要用来清除setTimeout()
方法设置的计时器。


在使用clearTimeout之前，需要检查pressTimer变量是否为null。如果没有为
ull，意味着有一个正在运行的计时器。因此，我们需要先清除它，并且将pressTimer变量设置为null。letcancel=(e)=>{

//检查pressTimer的值是否为null

if(pressTimer!==null){

clearTimeout(pressTimer)

pressTimer=null

}

}

一旦mouseup事件触发，这个函数就会被调用。


4、设置触发器


剩下的就是将事件监听器添加到想要长按效果的按钮上。


addEventListener("mousedown",start);


addEventListener("click",cancel);


以上代码合到一起是这样://定义变量

letpressTimer=null;

//创建计时器(1秒后执行函数)

letstart=(e)=>{

if(e.type==='click'&&e.button!==0){

return;

}

if(pressTimer===null){

pressTimer=setTimeout(()=>{

//执行任务!!!

},1000)

}

}

//停止计时器

letcancel=(e)=>{

//检查是否有正在运行的计时器

if(pressTimer!==null){

clearTimeout(pressTimer);

pressTimer=null;

}

}

//选择id为longPressButton的元素

letel=document.getElementById('longPressButton');

//添加事件监听器

el.addEventListener("mousedown",start);

//长按事件取消，取消计时器

el.addEventListener("click",cancel);

el.addEventListener("mouseout",cancel);

5、用Vue指令包装


创建Vue指令时，可以创建全局或局部指令，本文中，我们采用全局指令。


首先，我们必须声明自定义指令的名称。


Vue.diective('longpress',{


})


这就注册了一个名为v-longpress的全局自定义指令。


接下来，我们添加带参数的bind钩子函数，它允许我们引用指令绑定的元素，获取传递给指令的值，并标识指令使用的组件。Vue.directive('longpress',{

bind:function(el,binding,vNode){

}

})

接下来，我们在bind函数中添加长按功能的代码。Vue.directive('longpress',{

bind:function(el,binding,vNode){

//定义变量

letpressTimer=null;

//定义函数处理程序

//创建计时器(1秒后执行函数)

letstart=(e)=>{

if(e.type==='click'&&e.button!==0){

return;

}

if(pressTimer===null){

pressTimer=setTimeout(()=>{

//执行任务!!!

},1000)

}

}

//取消计时器

letcancel=(e)=>{

//检查是否有正在运行的计时器

if(pressTimer!==null){

clearTimeout(pressTimer);

pressTimer=null;

}

}

//添加事件监听器

el.addEventListener("mousedown",start);

//取消计时器

el.addEventListener("click",cancel);

el.addEventListener("mouseout",cancel);

}

})

接下来，我们需要添加一个函数来运行传递给longpress指令的方法。Vue.directive('longpress',{

bind:function(el,binding,vNode){

//定义变量

letpressTimer=null;

//定义函数处理程序

//创建计时器(1秒后执行函数)

letstart=(e)=>{

if(e.type==='click'&&e.button!==0){

return;

}

if(pressTimer===null){

pressTimer=setTimeout(()=>{

//执行函数

handler();

},1000)

}

}

//停止计时器

letcancel=(e)=>{

//检查是否有正在运行的计时器

if(pressTimer!==null){

clearTimeout(pressTimer);

pressTimer=null;

}

}

//运行函数

consthandler=(e)=>{

//执行传递给指令的方法

binding.value(e)

}

//添加事件监听器

el.addEventListener("mousedown",start);

//取消计时器

el.addEventListener("click",cancel);

el.addEventListener("mouseout",cancel);

}

})

现在，可以在Vue应用中使用这个指令了，除非使用者给指令传入的值不是一个函数。因此，我们需要通过警告反馈给使用者。


为了反馈给使用者，我们在bind函数中添加了以下内容://确保提供的表达式是函数

if(typeofbinding.value!=='function'){

//获取组件名称

constcompName=vNode.context.name;

//将警告传递给控制台

letwarn=`[longpress:]providedexpression'${binding.expression}'isnotafunction,buthastobe`;

if(compName){warn+=`Foundincomponent'${compName}'`}

console.warn(warn);

}

最后，如果这个指令也适用于触屏设备，那会是极好的。因此，我们添加了touchstart、touchend和touchcancel
事件监听器。


最终代码如下:Vue.directive('longpress',{

bind:function(el,binding,vNode){

//确保提供的表达式是函数

if(typeofbinding.value!=='function'){

//获取组件名称

constcompName=vNode.context.name;

//将警告传递给控制台

letwarn=`[longpress:]providedexpression'${binding.expression}'isnotafunction,buthastobe`;

if(compName){warn+=`Foundincomponent'${compName}'`}

console.warn(warn);

}

//定义变量

letpressTimer=null;

//定义函数处理程序

//创建计时器(1秒后执行函数)

letstart=(e)=>{

if(e.type==='click'&&e.button!==0){

return;

}

if(pressTimer===null){

pressTimer=setTimeout(()=>{

//执行函数

handler();

},1000)

}

}

//取消计时器

letcancel=(e)=>{

//检查计时器是否有值

if(pressTimer!==null){

clearTimeout(pressTimer);

pressTimer=null;

}

}

//运行函数

consthandler=(e)=>{

//执行传递给指令的方法

binding.value(e)

}

//添加事件监听器

el.addEventListener("mousedown",start);

el.addEventListener("touchstart",start);

//取消计时器

el.addEventListener("click",cancel);

el.addEventListener("mouseout",cancel);

el.addEventListener("touchend",cancel);

el.addEventListener("touchcancel",cancel);

}

})

现在可以在Vue组件里使用了：