时间戳

首页 > 解决方案 > 如何在javascript中添加延迟

javascript - 如何在javascript中添加延迟

问题描述

function abc(elm){
    this.$elm =  document.querySelector(elm)
}

abc.prototype.addClass =  function (str){
  this.$elm.classList.add(str)
    return this
}

abc.prototype.removeClass =  function (str){
   this.$elm.classList.remove(str)
    return this
}

abc.prototype.delay =  function (timer){
   let self = this
  
  setTimeout(()=>{
    return self
  },timer)
    return this
}

function $(str){
  return new abc(str);
}

let x = $('#test').delay(5000).delay(1000).addClass('red');

console.log($('#test'));

我想在 secsred之后添加课程。6我尝试使用 setTimeout 但不起作用。你能建议更好的方法吗？

我想编写一个延迟函数，在继续/执行下一个代码之前延迟一段时间。

标签： javascriptjquery

解决方案

您可以根据承诺创建一个非常简单的任务队列来执行。由于 Promise 的执行已经使用了一个任务队列，你只需要保留一个 Promise，并且任何时候你有一个新的东西要添加，你将它链接起来.then()并保留最新的 Promise。这样，如果您添加三个任务T1-> T2-> T3，它们将按照添加的顺序解决。如果您添加一个任务，它只是在它们之间添加一个简单的延迟，例如T1-> 等待 6 秒 -> T2-> 等待 5 秒 ->T3那么运行也会将执行空间隔开。

这是一个示例实现，用于说明利用thunk（不带参数的函数）作为延迟和稍后执行的任务的想法。

function abc(elm){
    this.$elm =  document.querySelector(elm)
    this.queue = Promise.resolve();
}

/**
 * Uniform way of adding a task for later execution
 * @param {Function} task - a thunk to be executed later
 * @param {number} [delay=0] time in milliseconds to wait after last task finished before executing this on
 */
abc.prototype.addTask = function(task, delay = 0) {
  const waitFor = () => new Promise( res => setTimeout(res, delay) );
  
  this.queue = this.queue
        .then(waitFor)
        .then(task)
}

abc.prototype.addClass =  function (str){
  this.addTask(() => this.$elm.classList.add(str));
  return this
}

abc.prototype.removeClass =  function (str){
  this.addTask(() => this.$elm.classList.remove(str));
  return this
}

abc.prototype.delay =  function (timer){
  // add an empty function as a task. If needed this can also do logging or other internal logic
  this.addTask(() => {}, timer);
  return this
}

function $(str){
  return new abc(str);
}

//usage

let x = $('#test').delay(5000).delay(1000).addClass('red');

x.delay(1000)
  .delay(1000)
  .delay(1000)
  .delay(1000)
  .delay(1000) //5 seconds
  .removeClass('red');
.red {
  background-color: red;
  color: white;
}
<p id="test">
Bacon ipsum dolor amet hamburger t-bone pork, pastrami sirloin swine corned beef tenderloin frankfurter tail ball tip meatball pork belly spare ribs prosciutto. Bresaola turkey buffalo jowl t-bone biltong burgdoggen cow capicola meatball pastrami boudin alcatra. Bresaola chicken bacon cow, frankfurter meatball hamburger jerky. Shankle capicola chicken leberkas turkey. Ball tip bacon doner kielbasa jerky. Salami picanha chicken bacon, turducken buffalo chislic andouille porchetta tongue shankle prosciutto t-bone. Beef andouille cow pork chop alcatra, turducken ribeye sirloin tail boudin strip steak doner.
</p>

推荐阅读