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

这是解决方案。我已经介绍了两个不同的数组。出于隔离的目的，你需要两个单独的区间对象。首先是 intervalObjOne ，第二个是 { {1}} 。两个不同数组的两个对象。如果想使用第三个数组创建第三个数组。你甚至可以使它动态化，但为了简单起见，我保持它们是静态的。

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

然后引入 document.querySelector ，其中包含 intervalArr 和 intervalObjOne 。

然后运行 intervalObjTwo 循环来迭代 forEach 并致电 intervalArr ， attachInterval 和 addMouseLeaveEvent 会将各个intervalObj作为参数传递给每个。

addMouseOverEvent 事件会在相应的intervalObj的间隔属性上发起 attachInterval 。

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

mouseleave 功能会在相应的div上附加 addMouseOverEvent 事件，该事件将调用 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)
    });	
}

Answer 2

你可以做的是： 1.有一个存储你的国家的对象 2.生成范围以存储git log --name-status --format=：

的位置

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

我认为这种方式比clearTimeout更容易阅读，然后在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

必须满足您的需求。我可以通过setInterval的函数访问interval，以便能够在回调中使用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); });。

鼠标悬停时JavaScript暂停setInterval

2 个答案: