鼠标悬停时JavaScript暂停setInterval

Question

嗨，我有一个循环遍历字符串数组的脚本，并使用innerHTML在特定的类上显示它们。

数组设置看起来像：

var myArray = [
  "TextString1",
  "TextString2",
  "TextString3",
  "TextString4"
]

var AnotherArray = [
  "AnotherArray1",
  "AnotherArray2",
  "AnotherArray3",
  "AnotherArray4"
]

而SetInterval函数本身就是这样的

  function ArrayPlusDelay(array, delegate, delay) {
    var i = 0
     // seed first call and store interval (to clear later)
      var interval = setInterval(function() {
            // each loop, call passed in function
          delegate(array[i]);
            // increment, and if we're past array, clear interval
          if(i++ >= array.length - 1) {
            i = 0 //clearInterval(interval);
          }
      }, delay)
    return interval
  }

  ArrayPlusDelay(myArray, function(obj) {
    document.querySelector('.cycle_questions').innerHTML = obj
  },2000)

  ArrayPlusDelay(AnotherArray, function(obj) {
    document.querySelector('.cycle_research').innerHTML = obj
  },2000)

我在哪里注入AddEventListener以使循环停止？ 并且在mouseleave上使循环继续？

谢谢！

Answer 1

这里是我推出了两种array.For隔离的目的不同，你需要两个独立的间隔object.First是solution.Here intervalObjOne和第二个是intervalObjTwo 。二对象为两种不同的array.If要使用第三组创建第三个。你甚至可以让它变得动态，但为了简单起见，我让它们保持静止。

domSelectorByClass和domSelectorByQuery只是document.GetElemensByClassName和document.querySelector的较短版本，以保持代码库的清洁。

然后intervalArr引入同时包含intervalObjOne和intervalObjTwo 。

然后运行forEach循环迭代intervalArr并调用attachInterval ， addMouseLeaveEvent和addMouseOverEvent函数，并将各自的intervalObj作为参数传递给每个函数。

attachInterval事件将在相应的intervalObj的interval属性上启动setInterval 。

addMouseLeaveEvent函数将在相应的div元素上附加mouseleave事件。

addMouseOverEvent函数将在相应的div上附加一个mouseover事件，该事件将调用clearInterval来停止setInterval 。

 var myArray = ["TextString1","TextString2","TextString3","TextString4"] var anotherArray = ["TextString5","TextString6"] var intervalObjOne = {array: myArray,interval : 'undefined',tick:0,className:'cycle_questions'} var intervalObjTwo = {array: anotherArray,interval: 'undefined',tick:0,className:'cycle_research'} var domSelectorByClass = document.getElementsByClassName.bind(document) var domSelectorByQuery = document.querySelector.bind(document) var intervalArr = [intervalObjOne,intervalObjTwo] function ArrayPlusDelay(delegate, delay,intervalObj) { var interval = setInterval(function() { delegate(intervalObj.array[intervalObj.tick]) if(intervalObj.tick++ >= (intervalObj.array).length - 1) { intervalObj.tick=0 } }, delay) return interval } intervalArr.forEach(function(elem,index){ attachInterval(elem) addMouseLeaveEvent(elem) addMouseOverEvent(elem) }) function attachInterval(intervalObj){ intervalObj.interval = ArrayPlusDelay(function(obj) { domSelectorByQuery('.'+intervalObj.className).innerHTML = obj },2000,intervalObj) } function addMouseOverEvent(intervalObj){ domSelectorByClass(intervalObj.className)[0].addEventListener('mouseover',function(event){ clearInterval(intervalObj.interval); }); } function addMouseLeaveEvent(intervalObj){ domSelectorByClass(intervalObj.className)[0].addEventListener('mouseleave',function(event){ attachInterval(intervalObj) }); } 

 <div class='cycle_questions' style='display:inline-block;border:1px solid red;width:100px;height:40px;'></div> <div class='cycle_research' style='display:inline-block;border:1px solid green;width:100px;height:40px;'></div> 

Answer 2

你可以在这里做的是：1。有一个存储你的状态的对象2.生成一个范围来存储i的位置：

我轻轻地修改了你的代码，以便更容易测试：

var myArray = [
  "TextString1",
  "TextString2",
  "TextString3",
  "TextString4"
];

var myArrayFoo = [
  "TFoong1",
  "TFoong2",
  "TFoong3",
  "TFoong4"
]
// Used to generate your scope
var myFnGenerator = function(array, delegate, interval) {
  var i = 0;
  return function() {
    if (interval.stop) {
      return false;
    }
      delegate(array[i]);
      if(i++ >= array.length - 1) {
       i=0

      }
  };

}
function ArrayPlusDelay(array, delegate, delay) {
  // The object which store your state
  var interval = {
    stop: true
  };
  var fn = myFnGenerator(array, delegate, interval);
  interval.timeout = setInterval(fn, delay);
  interval.stop = false;
  return interval;
}

var interval = ArrayPlusDelay(myArray, function(obj) {
  console.log(obj);
},2000)

var intervalFoo = ArrayPlusDelay(myArrayFoo, function(obj) {
  console.log(obj);
},2000)

document.getElementById('foo').addEventListener('mouseenter',function(event){
   interval.stop = true;
});
document.getElementById('foo').addEventListener('mouseout',function(event){
   interval.stop = false;
});


document.getElementById('foo').addEventListener('mouseenter',function(event){
   intervalFoo.stop = true;
});
document.getElementById('foo').addEventListener('mouseout',function(event){
   intervalFoo.stop = false;
});

我认为这种方式比clearTimeout更容易阅读，然后在mouseout重新启动它（更少的复制粘贴），但我想这更像是代码的风格。 如果你更喜欢clearTimeout：

var myArray = [
  "TextString1",
  "TextString2",
  "TextString3",
  "TextString4"
];

var myArrayFoo = [
  "TFoong1",
  "TFoong2",
  "TFoong3",
  "TFoong4"
]
var myFnGenerator = function(array, delegate) {
  var i = 0;
  return function() {
      delegate(array[i]);
      if(i++ >= array.length - 1) {
       i=0

      }
  };
}
function launchInterval(interval, delay) {
   if (interval.timeout === null) {
     interval.timeout = setInterval(interval.fn, delay);
  }
}
function clearMyInterval(interval) {
  if (interval.timeout !== null) 
     clearInterval(interval.timeout);
  interval.timeout = null;
}
function ArrayPlusDelay(array, delegate, delay) {
  var interval = {
    timeout: null
  };
  var fn = myFnGenerator(array, delegate);
  interval.fn = fn;
  launchInterval(interval, delay);
  return interval;
}

var interval = ArrayPlusDelay(myArray, function(obj) {
  console.log(obj);
},2000)

var intervalFoo = ArrayPlusDelay(myArrayFoo, function(obj) {
  console.log(obj);
},2000)

document.getElementById('foo').addEventListener('mouseenter',function(event){
  clearMyInterval(interval);
});
document.getElementById('foo').addEventListener('mouseout',function(event){
   launchInterval(interval, 2000);
});

document.getElementById('foo').addEventListener('mouseenter',function(event){
  clearMyInterval(intervalFoo);
});
document.getElementById('foo').addEventListener('mouseout',function(event){
   launchInterval(intervalFoo, 2000);
});

必须满足您的需求。 我允许从setInterval的函数访问interval，以便能够在回调中使用clearInterval 。