Question

我用jQuery创建了一个“改变单词”的循环通过使用此答案中的代码： jQuery: Find word and change every few seconds

一段时间后如何阻止它？在60秒之后或经过循环之后说？

您可以在此处看到更改的字词： http://skolresurser.se/

(function(){

            // List your words here:
            var words = [
                'Lärare',
                'Rektor',
                'Studievägledare',
                'Lärare',
                'Skolsyster',
                'Lärare',
                'Skolpsykolog',
                'Administratör'
                ], i = 0;

            setInterval(function(){
                $('#dennaText').fadeOut(function(){
                    $(this).html(words[i=(i+1)%words.length]).fadeIn();
                });
               // 2 seconds
            }, 2000);

        })();

Answer 1

要在运行一定次数后停止它，只需在该间隔中添加一个计数器，然后当它达到该数字时清除它。

e.g。

var timesRun = 0;
var interval = setInterval(function(){
    timesRun += 1;
    if(timesRun === 60){
        clearInterval(interval);
    }
    //do whatever here..
}, 2000);

如果你想在经过一段时间后停止它（例如1分钟），你可以这样做：

var startTime = new Date().getTime();
var interval = setInterval(function(){
    if(new Date().getTime() - startTime > 60000){
        clearInterval(interval);
        return;
    }
    //do whatever here..
}, 2000);

Answer 2

使用clearInterval清除间隔。您需要传递从setInterval方法获得的区间ID。

E.g。

var intervalId = setInterval(function(){
                    ....
                 }, 1000);

要清除上述间隔，请使用

clearInterval(intervalId);

您可以更改以下代码。

(function(){

    // List your words here:
    var words = [
        'Lärare',
        'Rektor',
        'Studievägledare',
        'Lärare',
        'Skolsyster',
        'Lärare',
        'Skolpsykolog',
        'Administratör'
        ], i = 0;

    var intervalId = setInterval(function(){
        $('#dennaText').fadeOut(function(){
            $(this).html(words[i=(i+1)%words.length]).fadeIn();
            if(i == words.length){//All the words are displayed clear interval
                 clearInterval(intervalId);
            }
        });
       // 2 seconds
    }, 2000);

})();

Answer 3

您应该考虑使用递归setTimeout()代替setInterval()来避免竞争条件。

var fadecount = 1;
(function interval(){  
    $('#dennaText').fadeOut(function(){
        $(this).html(words[i=(i+1)%words.length]).fadeIn('fast',function(){
            if (fadecount < 30){
                fadecount += 1;
                setTimeout(interval, 2000);
            }
        });
    });
}());

Answer 4

您可以改用setTimeout，这样更好：

＆＃13;

(function foo(){ // wrap everything in a self-invoking function, not to expose "times"
  times = 20; // how many times to run
  (function run(){
    // do your stuff, like print the iteration
    document.body.innerHTML = times;

    if( --times ) // 200 * 20 = 4 seconds
      setTimeout(run, 100);
  })();
})();

＆＃13;

Answer 5

我正在使用 VueJs 并想在几秒钟后删除一个 div；这就是我所做的，我希望可以帮助某人;)

export default {
  name: "Home",
  components: {},
  data() {
    return {
      removeAlert: false,
    };
  },
  methods: {
    removeAlertF() {
      let wait = window.setInterval(() => {
        this.removeAlert = true;
        console.log("done");
        if(true){
          window.clearInterval(wait);
        }
      }, 3000);
    },
  },
  mounted() {
    this.loadData();
    this.removeAlertF();
  },
};

<style>
.remove-alert {
  display: none;
}
</style>

 
 <div
        :class="removeAlert ? 'remove-alert' : ''"
        role="alert"
      >
        Data loaded successfully
      </div>

Answer 6

最简单的解决方案是

var intervalId =   setInterval(function() {
    $('#dennaText').fadeOut(function() {
        $(this).html(words[i = (i + 1) % words.length]).fadeIn();
    });
}, 2000); // run every 2 seconds

setTimeout(function(){
    clearInterval(intervalId);
},10000) // stop it after 10seconds

如何使setInterval在一段时间后或经过多次操作后停止？

6 个答案: