如何停止從另一個函數功能，然後再次啓動它與另一個參數

Question

我想製作一個滑塊，我有函數獲取對象數組並循環它，並且我選擇了更改模型列表，但是當我更改選擇，舊的功能實例仍然有效，他們開始一起工作。所以我添加功能塞子，但它不會工作。請幫助，謝謝！

 var keepGoing = true; 

     function slideList(models) { 
        $.each(models, function (index, model) { 
         setTimeout(function() { 
          if (keepGoing != false) { 
         moditem.innerHTML = ""; 
         modlist.value = model.id; 
         var photo = document.createElement('IMG'); 
         photo.src = model.photos[0].file; 
         photo.classList.add('img'); 
         moditem.appendChild(photo); 
         if (index >= models.length - 1) { 
          slideList(models); 
         } 
        } else { 
         return false; 
        } 
        }, 
        5000 * index); 
      }); 
     } 

     function startLoop() { 
      keepGoing = true; 
     } 

     function stopLoop() { 
      keepGoing = false; 
     } 

     $("#car-type-select").on('change', function() { 
      stopLoop(); 
      getModels(this.value); 
     }); 

清除超時：

var timer; 
    function slideList(models) { 
      $.each(models, function (index, model) { 
       timer = setTimeout(function() { 
         moditem.innerHTML = ""; 
         modlist.value = model.id; 
         var photo = document.createElement('IMG'); 
         photo.src = model.photos[0].file; 
         photo.classList.add('img'); 
         moditem.appendChild(photo); 
         if (index >= models.length - 1) { 
          slideList(models); 
         } 
        }, 
        5000 * index); 
      }); 
     } 

     $("#car-type-select").on('change', function() { 
      clearTimeout(timer); 
      getModels(this.value); 
     }); 

其他不重要的功能

function getModels(cartype_id) { 
      $.ajax({ 
       type: 'POST', 
       url: '/home/models/get', 
       data: { 
        'cartype_id': cartype_id 
       }, 
       success: function (models) { 
        makeList(models); 
        slideList(models) 
       } 
      }); 
     } 

     function makeList(models) { 
      modlist.innerHTML = ""; 
      $.each(models, function (index, model) { 
       var option = document.createElement("option"); 
       option.text = model.manufacturer.name + ' ' + model.name; 
       option.value = model.id; 
       modlist.add(option); 
      }); 
     } 

Answer 1

您需要使用clearTimeout停止功能setTimout停止執行。

例子：

var timer = setTimeout(function(){ /* code here */ }, 3000) 

clearTimeout(timer) //it will stop setTimeout function from executing. 

查看代碼更新後：

能不能請你：

var timers = []; 

function slideList(models) { 
    $.each(models, function(index, model) { 
    timers.push(setTimeout(function() { 
     moditem.innerHTML = ""; 
     modlist.value = model.id; 
     var photo = document.createElement('IMG'); 
     photo.src = model.photos[0].file; 
     photo.classList.add('img'); 
     moditem.appendChild(photo); 
     if (index >= models.length - 1) { 
      slideList(models); 
     } 
     }, 
     5000 * index)); 
    }); 
} 

$("#car-type-select").on('change', function() { 
    $.each(timers, function(i, timer) { 
    clearTimeout(timer); 
    }) 
    getModels(this.value); 
}); 

的setTimeout獲取調用在循環中需要的setTimeout的數組引用